Question

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

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

我想要实现的是，如果.menu ul li有一个名为子菜单的子div然后防止默认，如果它没有一个名为子菜单的子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');
});

Answer 1

您只需使用:has() selector：

$('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');
});

Answer 2

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

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

参考：

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

您可以使用children()代替find('*')来实现相同目标。

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

如果子div存在绑定事件，如果不存在则不绑定

2 个答案: