Javascript jQuery展开导航在子单击时折叠

你好!

我已经建立了一个扩展的导航系统，它正按照我想要的方式运行，除了它在孩子们的点击下崩溃的事实。我尝试过切换jQuery指向的位置，希望这能解决问题，但没有成功。我哪里做错了

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

---

当您单击项目的子项时，单击事件会“冒泡”到其父项，从而触发导致幻灯片向上滑动的单击事件。 您应该处理子项上的click事件，并使用StopperPogation避免事件冒泡。 试着这样做：

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

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

---

您可以检查最近的

ul

元素是否具有

nav.sidebar

的父元素：

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

---

或者，您也可以检查父元素的下一个同级元素是否是

ul

元素：

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

---

您应该避免在单击此处的元素内部传播任何内容，在本例中，它是类内部的

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

---

不要为混淆额外的代码而烦恼

只需将侦听器放在a标记上

像这样：

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

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

---

您可以通过添加以下内容来实现：

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

---

@JoshCrozier你是对的，我认为如果用户界面能做出一些让步，这是一个简单的方法。当然你们的方式要好得多，我也投票支持了你们提供的答案。这非常有效！然而，noobie的问题是，e是什么时候被定义的？我正在努力使自己更加熟悉JS和jQuery，我自己编写了第一部分代码，但后来像e这样的东西出现了，我又感到不知所措。@user3888851在

单击
事件侦听器中，
e
代表“事件”。你可以随意调用这个变量，它是这里的一个参数<代码>$（'.expandingNav'）。在（'click'，函数（e）{…}）上。如果查看click方法文档，您将看到该对象称为“eventData”。。文档有点混乱-澄清一下，e始终是点击的数据？除了e.target之外，我还可以传递给e什么呢？@user3888851
e
只是与单击事件关联的事件对象。要查看所有其他属性，您可以登录
e
，然后查看<代码>控制台日志（e）
。