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

내가 내 자바 스크립트 함수와 함께 많은 것들을 시도하고, 잃어버린 결국 및 ... 이 사람이 나를 도와 주시겠습니까 혼동?

$(".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/