jQuery展开导航折叠在子点击答案

【问题标题】：jQuery Expanding Nav Collapsing on Child ClickjQuery展开导航折叠在子点击
【发布时间】：2015-03-05 01:24:55
【问题描述】：

你好！

我已经建立了一个可扩展的导航，它完全按照我想要的方式运行，除了它在孩子点击时折叠。我曾尝试切换 jQuery 指向的位置，希望这能解决它，但没有运气。我哪里错了？

    $('.expandingNav').click(function(){
  if($(this).hasClass('expanded')){
    $(this).children('.hidden').slideUp();
    $(this).removeClass('expanded');
  }
  else{
    $(this).children('.hidden').slideDown();
    $(this).addClass('expanded');
  }
});

【问题讨论】：

标签： javascript jquery html css nav

【解决方案1】：

您可以检查最近的ul 元素是否具有nav.sidebar 的父元素：

$('.expandingNav').on('click', function (e) {
    if ($(e.target).closest('ul').parent('nav.sidebar').length) {
        // ...
    }
});

Updated Example

$('.expandingNav').on('click', function (e) {
    if ($(e.target).closest('ul').parent('nav.sidebar').length) {
        if ($(this).hasClass('expanded')) {
            $(this).children('.hidden').slideUp();
            $(this).removeClass('expanded');
        } else {
            $(this).children('.hidden').slideDown();
            $(this).addClass('expanded');
        }
    }
});

或者，您还可以检查父元素的下一个兄弟元素是否为ul 元素：

$('.expandingNav').on('click', function (e) {
    if ($(e.target).parent().next('ul').length) {
        // ...
    }
});

Updated Example

$('.expandingNav').on('click', function (e) {
    if ($(e.target).parent().next('ul').length) {
        if ($(this).hasClass('expanded')) {
            $(this).children('.hidden').slideUp();
            $(this).removeClass('expanded');
        } else {
            $(this).children('.hidden').slideDown();
            $(this).addClass('expanded');
        }
    }
});

【讨论】：

效果很好！但是，noobie 问题，e 是什么时候定义的？我正在努力熟悉 JS 和 jQuery，我自己编写了所有这些的第一部分，但随后出现了 e 之类的东西，我又一次感到迷茫。
@user3888851 在click 事件监听器中，e 代表“事件”。你可以随心所欲地调用这个变量，它是这里的一个参数 .. $('.expandingNav').on('click', function (e) { ... }); 。如果您查看 click 方法文档，您会看到该对象被称为“eventData”..api.jquery.com/click
文档有点混乱 - 澄清一下，e 总是点击的数据？除了 e.target，我还能传递给 e 的其他东西是什么？
@user3888851 本质上。 e 只是与点击事件相关的事件对象。要查看所有其他属性，您可以登录e，然后查看..console.log(e)。

【解决方案2】：

你可以简单地通过添加：

//If the e.target is the same element as this, you've not clicked on a descendant.
if( e.target !== this ) return;

updated fiddle

【讨论】：

@JoshCrozier 你是对的，如果 UI 可以做出一点让步，我认为这是一种简单的方法。当然你的方式要好得多，我也投票赞成你提供的答案。

【解决方案3】：

当您单击项目的子项时，单击事件“冒泡”到其父项，从而触发导致向上滑动的单击事件。您应该处理孩子的点击事件并使用 stopPropagation 来避免事件冒泡。试试这样的：

$('.expandingNav li').click(function(ev) { ev.stopPropagation(); })

【讨论】：

【解决方案4】：

你应该避免传播任何东西在你点击这里的元素内，在这种情况下它的li在类expandingNav内。

   $("li.expandingNav").on('click', function(e) {
  if($(this).hasClass('expanded')){
    $(this).children('.hidden').slideUp();
    $(this).removeClass('expanded');
  }
  else{
    $(this).children('.hidden').slideDown();
    $(this).addClass('expanded');
  }
    });
//On sub LI click , stop propagating. 
$("li.expandingNav li").on('click', function(e) {
 e.stopPropagation();
});

Working Fiddle

【讨论】：

【解决方案5】：

不要为令人困惑的额外代码而烦恼。

只需将监听器放在 a 标签上即可。

像这样：

  $('.expandingNav').children('a').click(function(){
   var element = $(this).parent();
  if($(element).hasClass('expanded')){
    $(element).children('.hidden').slideUp();
    $(element).removeClass('expanded');
  }
  else{
    $(element).children('.hidden').slideDown();
    $(element).addClass('expanded');
  }
});

【讨论】：