在 Jquery 中只选择 First UL Li

Question

我有一个 html 代码

<ul id="menu1">
 <li> //When Click this will fire Jquery event
   <a href="">Some word</a>
     <ul style="display:block;">
         <li>Hello</li>
    </ul>
  </li>
  <li> //When Click this will fire Jquery event
   <a href="">Some word</a>
     <ul style="display:block;">
         <li>Hello</li>
    </ul>
  </li>
  <li> //When Click this will fire Jquery event
   <a href="">Some word</a>
     <ul style="display:block;">
         <li>Hello</li>
    </ul>
  </li>
</ul>

我的问题是我想在单击主 UL LI 元素时触发我的 jquery 代码，我不想为内部 UL LI 触发 jquery。 但是无论我如何尝试，它都会触发所有 LI，下面是我的 jquery

$('#menu1 li').click(function () {
    $(this).find('ul').toggle();
});

我也尝试 #ul li ， #ul li a 。 但似乎没有任何作用。 无论如何要达到我所需要的吗？

Answer 1

您可以使用子组合器选择器 ( > ) 仅选择#menu1元素的顶级li子项。 尝试这个：

$('#menu1 > li').click(function () {
    $(this).find('ul').toggle();
});

尽管请注意，您的代码与您要实现的目标的描述不符。 您需要将事件处理程序放在顶级li的a元素上，并修改 DOM 遍历以找到相关的ul来切换它。 另请注意，您的 HTML 无效 - 您缺少</li>标签。 尝试这个：

 $('#menu1 > li a').click(function(e) { e.preventDefault(); $(this).parent().find('ul').toggle(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="menu1"> <li> <a href="">Some word</a> <ul> <li>Hello</li> </ul> </li> <li> <a href="">Some word</a> <ul> <li>Hello</li> </ul> </li> <li> <a href="">Some word</a> <ul> <li>Hello</li> </ul> </li> </ul>