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子级。试试这个：

$('#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>

在Jquery中仅选择First UL Li

1 个答案: