阻止 jQuery 选择也匹配的父母答案

【问题标题】：Stop jQuery From Selecting Parents That Also Match阻止 jQuery 选择也匹配的父母
【发布时间】：2013-04-19 17:28:00
【问题描述】：

我正在尝试设置一个响应式下拉菜单，在响应式模式下，它会覆盖悬停下降，禁用任何具有子 UL 的链接的默认点击事件（因此那些下方有下拉 ul 菜单的链接它们）并在点击时展开 CHILD ul。

$('.nav ul li').click(function() {

    if( $(this).children('ul').length ) {

        if ( $(window).width() <= 980 ) { 

            event.preventDefault();

            if( $(this).children('ul:first').is(':visible') ) {
                $(this).children('ul:first').hide(); }

            else { $(this).children('ul:first').show(); }

        } 

    }

});

我已经让它工作了，但发生的事情是选择器也匹配当前 li 的所有祖先......

如果我有：

<div class="nav">
    <ul>
        <li>Item 1
            <ul>
                <li>Item 2
                    <ul>
                        <li>Item 3</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

...所以发生的情况是，如果我单击第 2 项，它将展开它下面的 UL，但是它也会选择第 1 项的 li，并将 UL 隐藏在它下面并隐藏它，因为它是当前可见。

我需要它只选择用户单击的 li 正下方的 UL，而不是它的任何父项（因为它会开始隐藏所有内容，就像代码告诉它做的那样）。

有什么帮助吗？

【问题讨论】：

标签： jquery drop-down-menu navigation responsive-design

【解决方案1】：

可能选择父级的直接> 子级并停止事件冒泡.stopPropagation() 将起作用，如下所示：

$('.nav ul li').click(function (e) {
  e.stopPropagation();
  if ($('> ul:first', this).is(':visible')) {
    $('> ul:first', this).hide();
  } else {
    $('> ul:first', this).show();
  }
});

Demo

【讨论】：

@ChrisDeMarco 太好了！我很高兴它对您有所帮助，也期待您的成功。

【解决方案2】：

您没有传递事件参数，您稍后会尝试使用：

('.nav ul li').click(function(event) {
                                ^------------- ADD THIS

如果阻止事件还不够，您可能还需要停止传播事件：

event.preventDefault();
event.stopPropagation();

【讨论】：