jQuery的嵌套手風琴，只顯示一個級別

Question

假設我有一個結構如下：

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3 
     <ul> 
      <li>Item11</li> 
      <li>Item12</li> 
      <li>Item13</li> 
     </ul> 
    </li> 

這種樹狀結構可以有多個層次。

起初，我想說明以下列表：

Item 1 

Item 2 

Item 3 + 

當我點擊+列表上變成

Item 3 - 

    Item 11 

    Item 12 

    Item 13 

所以，家長列表中消失以及子表所示。 如果我點擊 - ，那麼一切都會返回到前一個列表。

有沒有這樣做的一些jquery插件？

也許，手風琴的一些選擇？

在此先感謝。

Answer 1

使用Dkouk他的版本來創建你所需要的。

編輯1：隱藏其他菜單項 編輯2：第二級菜單

$(function() { 
 
    
 
    
 
    $('ul li').each(function() { 
 
    if ($(this).find('ul').length > 0){ 
 
    $(this).addClass('child'); 
 
    } 
 

 

 
    
 
    }); 
 
    
 
    $('ul li.child span').click(function() { 
 
    $(this).parent().toggleClass('open').find('ul').first().slideToggle(); 
 
    
 
      $(this).parent().siblings().slideToggle(); 
 

 
    
 
}); 
 
    
 
    
 
});

ul { 
 
    list-style:none; 
 
} 
 
ul li.child span:after { 
 
    content:"+"; 
 
} 
 
ul li.child.open span:after { 
 
    content:"-"; 
 
} 
 
li ul { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul class="main"> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li><a href="#">Item 2</a></li> 
 
    <li> 
 
    <span>Item 3</span> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li> 
 
     <span>Item 2</span> 
 
     <ul> 
 
      <li><a href="#">Item 1</a></li> 
 
      <li><a href="#">Item 2</a></li> 
 
      <li><a href="#">Item 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Item 3</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

您可以將類添加到列表中時，它有一個子表，並切換列表，切換另一個班級的父母，因此可以將'+'更改爲' - '。

你可以儘可能多的級別，並且代碼將工作， 我已經添加一個跨度列表有孩子，但所以只能觸發點擊文本，如果你觸發單擊李列表並打開子列表然後再次關閉。

您可以設置內容的樣式。 這裏一個簡單的例子：

$(function() { 
 
     
 
    
 
     $('ul li').each(function() { 
 
     if ($(this).find('ul').length > 0){ 
 
     $(this).addClass('child'); 
 
     } 
 

 

 
     
 
     }); 
 
     
 
     $('ul li.child span').click(function() { 
 
     $(this).toggleClass('open').parent().find('ul:first').slideToggle(); 
 
     $(this).parent().siblings().slideToggle(); 
 
    }); 
 
     
 
     
 
    });

ul { 
 
     list-style:none; 
 
    } 
 
    ul li.child span:after { 
 
     content:"+"; 
 
    } 
 
    ul li.child span.open:after { 
 
     content:"-"; 
 
    } 
 
    ul li ul { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li> 
 
     <span>Item 3</span> 
 
     <ul> 
 
      <li><a href="#">Item 1</a></li> 
 
      <li><a href="#">Item 2</a></li> 
 
      <li> 
 
      <span>Item 3</span> 
 
      <ul> 
 
       <li><a href="#">Item 1</a></li> 
 
       <li><a href="#">Item 2</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul>