幻燈片切換爲多個ID

Question

每當用戶點擊#bu id時，我都想滑下（或向上）所有＃bu2 ids。但是，當我點擊#bu時，只顯示「First」。代碼：

$("#bu2").slideToggle("slow"); 

<li class="sliding-element" id="bu">clickMe</li> 
       <li class="sliding-element" id="bu2" style="display:none;">First</li> 
       <li class="sliding-element" id="bu2" style="display:none;">Second</li> 
       <li class="sliding-element" id="bu2" style="display:none;">Third</li> 

我認識到我需要一個循環。然後，我嘗試了 $ next（「＃bu2」）。slideToggle（「slow」）; 但它沒有解決它。我怎樣才能使它滑動上下使用ID，而不包括在過程中的「滑動元素」類和聲明「第二」和「第三」爲不同的ID？
謝謝

Answer 1

你不應該有相同ID的多個元素。

試試這個：

$(".bu2").slideToggle("slow"); 

<li class="sliding-element" id="bu">clickMe</li> 
<li class="sliding-element bu2" style="display:none;">First</li> 
<li class="sliding-element bu2" style="display:none;">Second</li> 
<li class="sliding-element bu2" style="display:none;">Third</li> 

或者如果你想滑入一個UL所有 '禮' 的元素，這樣的：

$("ul#foo li").slideToggle("slow");   

<ul id="foo"> 
    <li>First</li> 
    <li>Second</li> 
</ul> 

Answer 2

使用非獨特的東西的類。此外<li> s只能且必須往裏走在<ul>小號

$("#bu").click(function(){ 
    $('.bu2').slideToggle("slow"); 
}) 

<ul class="sliding-element" id="bu">clickMe 
    <li class="sliding-element bu2" style="display:none;">First</li> 
    <li class="sliding-element bu2" style="display:none;">Second</li> 
    <li class="sliding-element bu2" style="display:none;">Third</li> 
</ul>