JQuery手風琴風格列表

Question

我想要有一個可摺疊的元素列表，其中只有一個可以在任何給定時間看到。

我把它像：

<div class="grid_12" id="menu_container"> 

    <div class="grid_12 title" style="background-color:pink;"> 
     Book 1 
    </div> 

    <div class="grid_12 row" style="background-color:white;"> 
     Chapter 1 
     <div class="grid_12 details">Lorem lipsum sin dolor chapter 1</div> 
    </div> 

    <div class="grid_12 row" style="background-color:white;"> 
     Chapter 2 
     <div class="grid_12 details">Lorem lipsum sin dolor chapter 2</div> 
    </div>          

</div>​ 

我嘗試了很多的東西與我的javascript函數，並結束了失落和迷惘...... 任何人都可以請幫我在這？

$(".row").click(function(e){ 

    $(".current").slideUp(function(){ 
     $(".current").hide(); 
     $(".current").removeClass("current");                      
    }); 

    $(this).children("div.details").addClass("current"); 
    $(this).children("div.details").slideDown(); 

});​ 

在此先感謝！ S.

Here's a JSFiddle version

Answer 1

像這樣的事情？

$(".row").click(function(e){ 
    var $e = $(this).children(); 
    if ($e.hasClass('current')) return; 

    $(".current").slideUp(function(){ 
     $(this).removeClass("current");           
    }); 

    $e.addClass("current").slideDown(); 
}); 

http://jsfiddle.net/DLFV9/