0

我刚开始学习jquery，所以请放轻松。

我正在尝试创建一个滑出菜单，当您单击按钮时，菜单会滑出显示菜单，当单击菜单项时，与选择相关的子菜单将滑出并替换现有菜单，但我我被困在某个部分。当您单击列表项时，我的 jquery 代码正在阻止链接被处理，而是显示正确的子菜单，但是一旦您到达末尾并且没有更多的子菜单，链接将不起作用。

我想要实现的是，如果 .menu ul li 有一个名为 sub-menu 的子 div 则阻止默认设置，如果它没有名为 sub-menu 的子 div 则不要理会它。

我已经搜索了一整天，我上周才开始学习这个。

这是html

  <ul class="menu">
    <li class="menu-item"><a href="one">1</a></li>
    <li class="menu-item"><a href="two">2</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="two-one">3-1</a></li>
      </ul>
    </li>
    <li class="menu-item"><a href="three">3</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="three-one">3-1</a></li>
        <li class="menu-item"><a href="three-two">3-2</a>
          <ul class="sub-menu">
            <li class="menu-item"><a href="three-two-one">3-2-1</a></li>
          </ul
        </li>
      </ul>
    </li>
    <li class="menu-item"><a href="four">4</a></li>
  </ul>

这是我坚持的 jquery 部分

$('nav ul li').click(function(e) {
    e.preventDefault();
    $('.sub-menu').toggleClass('open');
});
4

2 回答 2

1

您只需要使用:has()选择器：

$('nav ul li:has(.sub-menu)').click(function(e) {

});

作为性能建议，我建议将委托处理程序绑定到nav元素，并ul在选择中删除不必要的。您可能还打算在匹配的元素中搜索，而不是切换所有 .sub-menu元素：

$('nav').on('click', 'li:has(.sub-menu)', function (e) {
    e.preventDefault();
    $(this).find('.sub-menu').toggleClass('open');
});
于 2013-10-16T14:51:39.870 回答
0

我不是那么好，但这可以帮助：

if( $('#element').find('*').length > 0 ) {
  // Do something
  $('#element').click( function () { } );
}

参考：

http://api.jquery.com/find/

您可以使用children()而不是find('*').

http://api.jquery.com/children/

于 2013-10-16T14:47:19.140 回答