Javascript 嵌套导航单击逻辑问题

我一直在尝试获得一个简单的垂直导航，以便在单击时显示列表项的子项

但是，当您单击任何嵌套的子列表项时，实际上您再次“单击”父列表项。这将触发我的单击功能以删除“.active”，并在用户重定向到其所选页面之前关闭父列表项。这看起来很糟糕，而且很烦人

关于如何获得不影响子列表项的单击功能，有什么建议吗

$('#sidebar > li.parent').click(function(){
  if($(this).hasClass('active')){
        $(this).removeClass('active');
      }else{
        $(this).addClass('active');
  }
});

HTML

---

您可以为子元素添加一个click处理程序，该处理程序使用StopproPagation来防止click事件冒泡到父元素：

$('#sidebar > li li').click(function(e){
  e.stopPropagation();
});

---

进一步阅读：。

您可以为子元素添加一个单击处理程序，该处理程序使用StopperPagation来防止单击事件冒泡到父元素：

$('#sidebar > li li').click(function(e){
  e.stopPropagation();
});

---

进一步阅读：。

您需要停止在儿童中传播。。。不是父母

e.preventDefault仅用于停止在示例中单击父级的链接。e、 stopPropagation停止子单击冒泡DOM

我将两个处理程序链接在一起，这样您就不需要像这样的单独选择器：

$('#sidebar > li.parent ul li").click(function(e){
    e.stopPropagation();    
});

---

你需要停止在孩子身上传播。。。不是父母

e.preventDefault仅用于停止在示例中单击父级的链接。e、 stopPropagation停止子单击冒泡DOM

我将两个处理程序链接在一起，这样您就不需要像这样的单独选择器：

$('#sidebar > li.parent ul li").click(function(e){
    e.stopPropagation();    
});

---

在停止事件的传播之前，请花一些时间来加速

从css-tricks.com，停止事件传播的危险，非常简单：

一开始，修改一个短暂的事件似乎是无害的，但它会带来风险。当您改变人们期望的行为以及其他代码所依赖的行为时，您将出现bug。这只是时间问题

一个更好的解决方案是使用一个事件处理程序，它的逻辑被完全封装，唯一的责任是确定是否应该为给定事件隐藏菜单

话虽如此，你可以做一些类似的事情

$('#sidebar').on('click', function( e ) {
    var $target = $(e.target).closest('li');

    if ( $target.hasClass('parent') ) {
        $target.toggleClass('active');
    }
});

工作示例：

---

在停止事件传播之前，请花一些时间来启动

从css-tricks.com，停止事件传播的危险，非常简单：

一开始，修改一个短暂的事件似乎是无害的，但它会带来风险。当您改变人们期望的行为以及其他代码所依赖的行为时，您将出现bug。这只是时间问题

一个更好的解决方案是使用一个事件处理程序，它的逻辑被完全封装，唯一的责任是确定是否应该为给定事件隐藏菜单

话虽如此，你可以做一些类似的事情

$('#sidebar').on('click', function( e ) {
    var $target = $(e.target).closest('li');

    if ( $target.hasClass('parent') ) {
        $target.toggleClass('active');
    }
});

工作示例：

---

---

添加return false或use.stopPropagation并将其绑定到子链接。@j08691:return false也会停止链接的工作。@TrueBlueAusie-您确实看到了子链接吗？@j08691:Yes。。。您将停止这些书签链接的工作：添加return false或use.stopPropagation并将其绑定到子书签。@j08691:return false也会停止这些链接的工作。@TrueBlueAusie-您看到子书签链接只是？@j08691:Yes。。。您将停止这些书签链接的工作：您需要停止在子对象中的传播。。。这对我来说是个新概念。我该如何停止对孩子的传播？这个解决方案在这个时候可能对你有用，但是我会认真考虑我下面的答案，以及包含的链接来解释。我还准备了一把提琴来证明它能正常工作。你需要停止在孩子们身上的传播。。。这对我来说是个新概念。我该如何停止对孩子的传播？这个解决方案在这个时候可能对你有用，但是我会认真考虑我下面的答案，以及包含的链接来解释。我还准备了一把小提琴来证明它能正常工作。第一个e.preventDefault会破坏最初的点击功能。@BenRacicot:所以说这只是一个例子。。。拿出来：啊，很好。谢谢你的回答。第一个e.preventDefault会破坏最初的单击功能。@BenRacicot:因此说这只是一个例子。。。拿出来：啊，很好。谢谢你的回答。你的链接至少在这里已经失效了：最好在有效时复制一些相关内容。@TrueBlueAusie我已经尝试过几次了，它对我有效，但我会添加内容。。。谢谢你的链接至少已经死了：最好在它工作时复制一些相关内容。@TrueBlueAussie我已经试过几次了，它对我很有效，但我会添加内容。。。谢谢