Question

我正在尝试设置一个响应式下拉菜单，在响应模式下，覆盖悬停丢弃，禁用任何具有子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，而不是它的任何父节点（因为它会像代码告诉它那样开始隐藏所有内容）。

任何帮助？

Answer 1

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

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

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

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

Answer 2

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

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

停止jQuery选择也匹配的父母

2 个答案:

Demo