1

要素の折りたたみ可能なリストを作成しようとしています。このリストでは、一度に1つしか表示できません。

私はそれを次のように設定しました：

<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。

これがJSFiddleバージョンです

4

1 に答える 1

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/

于 2012-12-18T21:21:38.163 に答える