Question

您好！

我已经构建了一个扩展的导航，它正在按照我想要的方式运行，除了它在孩子们点击时崩溃的事实。我试过切换jQuery指向的地方，希望这会解决它，但没有运气。我哪里错了？

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

Answer 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');
        }
    }
});

Answer 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

Answer 3

当您点击某个项目的孩子时，点击事件＆＃34;冒泡＆＃34;到它的父节点因此触发了导致向上滑动的click事件。您应该处理子项上的click事件并使用stopPropagation来避免事件冒泡。尝试这样的事情：

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

Answer 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(); });。

{{1}}

Working Fiddle

Answer 5

不要因为混乱的额外代码而烦恼。

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

像这样：

  $('.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');
  }
});

jQuery扩展导航在儿童点击时折叠

5 个答案: