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/