3

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

有什么帮助吗？

4

2 回答 2

1

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

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

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

event.preventDefault();
event.stopPropagation();
于 2013-04-19T17:31:32.793 回答
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();
  }
});

演示

于 2013-04-19T17:33:27.873 回答