jquery:ul，li父多个子切换

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

例如：

意思：单击ul时，我只看到第一个子节点（将显示child1和child2，但不显示孙子节点）。单击child1或child2时，我会看到相应的孙子。 单击“祖父母”时不会显示孙辈，仅在单击“子女1”或“子女2”时才会显示孙辈

---

我知道我正在重新发明一些预先编码的解决方案，但任何帮助都将不胜感激

这里需要两个步骤，首先修复HTML以使其有效（a

必须位于a
或
），如下所示：

<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();
});​

，它们在传递到
单击
处理程序的
事件
上键入。这可以防止
单击
事件冒泡，导致父级也切换其下的子级…在演示中注释掉这一行，以查看一些非常不受欢迎的行为：）

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

ul li ul { display: none; }​

这里需要两个步骤，首先修复HTML以使其有效（a
必须位于a
或
），如下所示：

<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();
});​

，它们在传递到
单击
处理程序的
事件
上键入。这可以防止
单击
事件冒泡，导致父级也切换其下的子级…在演示中注释掉这一行，以查看一些非常不受欢迎的行为：）

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

ul li ul { display: none; }​

使用

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

请注意，不允许嵌套
li
元素。使用
div
或
li
中的其他东西。您需要将您的孩子
元素包装在
中，同时
只能是
或
元素的子元素。您还需要将孩子
元素包装在
中，
只能是
或
元素的子元素。+1用于快速解决方案。一定要包括那个小小的CSS，或者从
$（'ul-li-ul'）.hide（）开始，否则元素将立即打开。@MvanGeest:注意：）-我添加了我在演示+1中使用的CSS以获得快速解决方案。一定要包括那个小小的CSS，或者从
$（'ul-li-ul'）.hide（）开始，否则元素将立即打开。@MvanGeest:注意：）-我添加了演示中使用的CSS