嵌套导航点击逻辑问题

Question

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

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

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

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

HTML

<aside id="tertiary" class="tertiary">
    <ul id="sidebar" class="sidebar">
        <li class="active"><a href="/">Portal</a></li>
        <li><a href="ecards.html">Start Here</a></li>
        <li><a href="ecards.html">Cards</a></li>
        <li class="parent"><a href="programs.html">Programs</a>
            <ul>
                <li><a href="#">LOS</a></li>
                <li><a href="#">Safety</a></li>
                <li><a href="#">Retirement</a></li>
                <li><a href="#">Wellness</a></li>
                <li><a href="#">Investors</a></li>
            </ul>
        </li>
        <li><a href="#">Marketplace</a></li>
        <li><a href="#">Reporting</a></li>
    </ul>
</aside>

Answer 1

您需要停止在子代中传播...而不是父代

http://jsfiddle.net/TrueBlueAussie/g6a496Lf/

$('#sidebar > li.parent').click(function (e) {
    e.preventDefault();
    $(this).toggleClass('active');
}).find("ul li").click(function(e){
    e.stopPropagation();    
});

e.preventDefault() 只是用于阻止链接单击示例中的父级。 e.stopPropagation() 阻止子点击冒泡 DOM。

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

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

Answer 2

您可以为使用stopPropagation 的子元素添加点击处理程序，以防止点击事件冒泡到父元素：

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

延伸阅读：MDN docs for Event.

Answer 3

在停止传播事件之前，请花一些时间在 why you shouldn't do so 上启动。

来自 css-tricks.com，“停止事件传播的危险”，非常简要：

“修改一个单一的、稍纵即逝的事件一开始似乎无害，但它会带来风险。当你改变人们期望的行为以及其他代码所依赖的行为时，你就会有错误。这只是一个问题时间。”

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

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

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

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

工作示例： http://jsfiddle.net/g6a496Lf/1/