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/