Question

我一直试图通过简单的垂直导航来点击列表项目的孩子。

然而，当您再点击任何嵌套的子项列表项时，您实质上是单击＆＃39;再次显示父列表项。这会触发我的点击功能以删除＆＃39; .active＆＃39;并在用户重定向到所选页面之前关闭父列表项。这看起来很糟糕，而且非常烦人。

有关如何使点击功能不影响子列表项的任何建议吗？

$('#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/

嵌套导航单击逻辑问题

3 个答案: