jQuery：ul，li父級多個子子級子切換

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

您需要2個步驟，首先將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();
});​

您可以在此處查看演示 ，它們的關鍵是傳遞給click處理程序的event .stopPropagation() 。 這可以防止click事件冒泡，從而導致父級也切換其下的子級...在演示中注釋掉此行以查看一些非常不受歡迎的行為:)

哦，就像Mvan在評論中提到的那樣，最初就像演示一樣，使用一些CSS隱藏子級：

ul li ul { display: none; }​

Answer 2

使用>選擇器 。

請注意，不允許嵌套li元素。 在li內使用div或其他東西。