幻灯片切换为多个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>