Question

HTML：

<ul class="menu">
<li><a href="http://google.com">Text</a>
    <ul>
        <li><a href="http://google.com">Text</a>
        <li><a href="#">Text</a>
        <li><a href="#">Text</a>
    </ul>
</li>
<li><a href="http://google.com">Text</a></li>
<li><a href="http://google.com">Text</a></li>
<li><a href="http://google.com">Text</a></li>
<li><a href="#">Text</a>
    <ul>
        <li><a href="#">Text</a>
        <li><a href="#">Text</a>
        <li><a href="#">Text</a>
    </ul>
</li>
<li><a href="#">Text</a></li>
</ul>

JS：

$(".menu li a").click(function() {
    $(this).parent().find("ul").toggle();
    return false;
});

如果只有当<li>里面有<ul>时，如何使这个js工作？

不添加额外的课程。

当当前<ul>内没有子<li>时，它不起作用。

jsfiddle.net

上提供此示例

如果您提供链接到您的工作示例，那就更好了。

Answer 1

尝试限制父级带回第一个li，现在它找到ul的{{1}}作为顶级容器，然后在其中有几个li所以逻辑按照书面工作。

ul

Answer 2

如果当前徘徊的ul的孩子li执行某项操作：

$('li').hover(
  function(){
    if ($(this).has('ul')) {
      // do stuff
    }
  });

Answer 3

我想补充一点，您也可以将:has选择器与parent > child选择器（demo）一起使用：

$('.menu li:has(ul) > a').click(function() {
    $(this).parent().find('ul').toggle();
    return false;
});

jQuery检测子<ul> </ul>

3 个答案: