单击此子项中的链接时添加关闭功能答案

【问题标题】：Adding a close function on click of a link within this child单击此子项中的链接时添加关闭功能
【发布时间】：2017-06-13 10:49:12
【问题描述】：

我有这个响应式 jquery 菜单支持：

 (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);

并使用此 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>

我一辈子都不知道如何设置它，当单击列表块中的 A 时，它会导致菜单折叠。因为这是一个单页站点，所以不希望它保持打开状态。

感谢任何帮助。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以使用.add

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

演示

$(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>

你可以看看

【讨论】：

你们/女孩/非二进制朋友太棒了！这正是我想要弄清楚的。

【解决方案2】：

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

希望这会有所帮助:)

【讨论】：

【解决方案3】：

您是否尝试为树对象本身添加切换功能？这段代码未经测试，但可能是这样的..

    (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);

【讨论】：