CODEWITHSUNDEEP
javascriptjqueryhtml
Remog
Remog

Reputation: 163

Adding a close function on click of a link within this child

I have this responsive jquery menu powered with:

 (function($) {
  $.fn.collapsable = function(options) {
    // iterate and reformat each matched element
    return this.each(function() {
      // cache this:
      var obj = $(this);
      var tree = obj.next('.navigation');
      obj.click(function(){
        if( obj.is(':visible') ){tree.toggle();}
      });
      $(window).resize(function(){
        if ( $(window).width() <= 780 ){tree.attr('style','');};
      });
    });
  };

  $(document).ready(function(){
    $('.slide-trigger').collapsable();
  });  
})(jQuery);

and structured with this HTML

<nav id="navigation">
 <div class="navheader slide-trigger">&#9776;<span></span></div>
  <ul class="navigation group">
    <li><a href="#slide1">Link 1</a></li>
    <li><a href="#slide2">Link 2</a></li>
    <li><a href="#slide3">Link 3</a></li>
    <li class="ctoa"><a href="#c2a">Link 4</a></li>
  </ul>
 </nav>

I can't for the life of me figure out how to set it up that when an A in the list block is clicked, it causes the menu to collapse. because this is a single page site, having it stay open is not desirable.

Any help is appreciated.

Upvotes: 0

Views: 52

Answers (3)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

You can use .add

obj.add(tree.find('a')).click(function(){

Demo

$(document).ready(function(){
  $('.slide-trigger').collapsable();
}); 

//(function($) {
  $.fn.collapsable = function(options) {
    // iterate and reformat each matched element
    //return this.each(function() {
      // cache this:
      var obj = $(this);
      var tree = obj.next('.navigation');
      tree.hide();
      obj.add(tree.find('a')).click(function(){
        if( obj.is(':visible') ){tree.toggle();}
      });
      $(window).resize(function(){
        if ( $(window).width() <= 780 ){tree.attr('style','');};
      });
    //});
  }; 
//})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav id="navigation">
 <div class="navheader slide-trigger">&#9776;<span></span></div>
  <ul class="navigation group">
    <li><a href="#slide1">Link 1</a></li>
    <li><a href="#slide2">Link 2</a></li>
    <li><a href="#slide3">Link 3</a></li>
    <li class="ctoa"><a href="#c2a">Link 4</a></li>
  </ul>
 </nav>

You can take a look at

Upvotes: 1

Andre Mocke
Andre Mocke

Reputation: 86

Have you tried adding a toggle function for the tree object itself? This code is untested but maybe something like this..

    (function($) {
  $.fn.collapsable = function(options) {
    // iterate and reformat each matched element
    return this.each(function() {
      // cache this:
      var obj = $(this);
      var tree = obj.next('.navigation');
      obj.click(function(){
        if( obj.is(':visible') ){tree.toggle();}
      });

      // added tree toggle
      tree.click(function(){
          if( tree.is(':visible') ){tree.toggle();}
      });

      $(window).resize(function(){
        if ( $(window).width() <= 780 ){tree.attr('style','');};
      });
    });
  };

  $(document).ready(function(){
    $('.slide-trigger').collapsable();
  });  
})(jQuery);

Upvotes: 1

Willower
Willower

Reputation: 1262

      $('ul.navigation li a').click(
      function(e)
      {
        e.preventDefault();
        $('.slide-trigger').click();
      });

Hope this helps :)

Upvotes: 1

Related Questions