Question

我的主要问题如下：如何在点击封闭父母时仅显示ul或li的第一个子孙。

例如：

<ul> Grandparent
  <li> Child1 <li> Grandchild11</li></li>
  <li> Child2 <li>GrandChild21</li><li>grandchild22</li></li>
</ul>

所以，例如

我希望有所作为

$('ul').click(function(){
  $('ul').children('first li').toggle();
});
$('li').click(function(){
  $('li').children('first li').toggle();
});

含义：当我点击ul时，我只看到第一个子节点（将显示child1和child2，但不会显示孙子节点）。当我点击child1或child2时，我会看到相应的孙子。只有在点击child1或child2时，才会在点击祖父母时显示孙子。

我知道我正在重新发明一些预先编码的解决方案，但任何帮助都会受到重视！

Answer 1

此处需要执行以下两个步骤：首先将HTML修复为有效（<li>必须位于<ul>或<ol>），如下所示：

<ul> 
    <li>Grandparent
        <ul>
          <li> Child1 
              <ul><li> Grandchild11</li></ul>
          </li>
          <li> Child2 
              <ul><li>GrandChild21</li><li>grandchild22</li></ul>
          </li>
        </ul>
    </li>
</ul>

然后您的点击处理程序如下所示：

$('li').click(function(e){
  $(this).children('ul').slideToggle();
  e.stopPropagation();
});

You can view a demo here，这里的密钥是event传递给click处理程序的.stopPropagation()。这可以防止click事件冒泡，导致父项也切换它们下面的子项...在演示中注释掉这一行以查看一些非常不良的行为：）

哦，正如Mvan在评论中提到的那样，最初使用一些CSS来隐藏孩子，就像演示一样：

ul li ul { display: none; }

Answer 2

使用> selector。

请注意，不允许嵌套li元素。在div内使用li或其他内容。

jquery：ul，li父多子子子切换

2 个答案: