jquery - 在 Jquery 中仅选择第一个 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

您可以使用子组合器选择器 ( > ) 仅选择顶层 li #menu1的 children 元素。试试这个:

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

尽管请注意，您的代码与您想要实现的目标的描述不匹配。您需要将事件处理程序放在 a 上顶层元素li ，并修改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>