Jquery類似於手風琴的內容切換

Question

我有一個非常基本的類手風琴（http://jqueryui.com/accordion/）內容顯示系統。我是新來的，也是固執的，所以我沒有使用提供的。 這裏是代碼：

 $(".listitem").click(function(){ 
      $("#info"+$(this).attr('id')).slideToggle("fast"); 
     }); 

<h3 class="listitem" id="1">title 1</h3> 
<div id="info1">blah blah blah 1</div> 

<h3 class="listitem" id="2">title 2</h3> 
<div id="info2">blah blah blah 2</div> 

所有列表中的項目有數字1-6，或任何的ID和隱藏的內容有「信息」 +相應的數字ID。我的問題是，我怎麼能這樣做，當一個新的項目被點擊時，它會關閉前一個？

Answer 1

跟蹤哪個人打開。

(function() { 
    var open = -1; 
    $(".listitem").click(function() { 
     var id = this.getAttribute("data-page"); 
     if(id != open) { 
      $("#info"+id+", #info"+open).slideToggle("fast"); 
      open = id; 
     } 
    }); 
})(); 

<h3 class="listitem" data-page="1">title 1</h3> 
<div id="info1">blah blah blah 1</div> 

<h3 class="listitem" data-page="2">title 2</h3> 
<div id="info2">blah blah blah 2</div> 

注意，我與data-page取代你的id屬性，因爲在HTML4它是無效的有開始與一些的ID，它是不恰當的使用ID的反正。此外，我用其等效的vanilla JS代替$(this).attr(...)。

Answer 2

$(".listitem").click(function(){ 
     var content=$(this).next(); 
     $('.listitem+div:visible').slideToggle("fast",function(){ 
       content.slideToggle("fast"); 
       }); 
     }); 

這裏的訣竅是在jQuery中使用:visible選擇器;僅選擇以前的選擇，匹配可見的元素，一旦所有可見內容是隱藏的，剛點擊的內容將打開

而且.listitem+div手段選擇與列表項類

所有元素後，來到右邊的格