使用JQuery同時摺疊和展開手風琴（演示）

Question

我被困在使用JQuery的展開/摺疊手風琴上。

在點擊第一個標題並展開之後，如果您點擊另一個標題，它會將前標題徹底摺疊，然後它會展開您點擊的標題。首先這個崩潰然後擴展第二個技術是非常分散注意力的，而且應該發生的事情是標題正在擴大，它應該摺疊起初的標題。我錯過了什麼？

你可以體驗演示here

下面是我所有的工作>>

的Javascript

<script src="http://www.apus.edu/bin/l/y/jquery-1.3.2.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
//<!-- 
$(document).ready(function() 
{ 
    $(".accordian>li.expanded").removeClass("expanded"); 
    $(".accordian>li h2").addClass("jse").click(function() { 
        var doOpen = !$(this).parent().hasClass('expanded'); 
        var openContainers = $(".accordian>li.expanded").length>0; 
        var targetNode = this; 
        if(openContainers) { 
            $(".accordian>li.expanded h2") 
                .parent() 
                    .removeClass('expanded') 
                .end() 
                .nextAll() 
                .slideUp(100,function(){ 
                    if($(".accordian>li.expanded").length==0) performOpen(doOpen,targetNode); 
                }); 
        } 
        else { 
            performOpen(doOpen,targetNode); 
        } 
        // if containers are open, proceed on callback 
        // else proceed immediately 
    }).nextAll().slideUp(100); 
}); 

function performOpen(doOpen,whichNode) { 
    if(doOpen) { 
       $('html,body').animate({scrollTop: $(whichNode).offset().top}, 1000); //target code 
       $(whichNode).nextAll().slideDown(100).parent().addClass('expanded'); 
    } 
} 
//--> 
</script> 

CSS

<style> 
.accordian { 
list-style : none; 
padding : 0px; 
margin : 0px; 
font-size : 12px; 
} 
.accordian li { 
list-style : none; 
padding : 0px; 
margin : 0px; 
} 
.accordian li a:hover { 
text-decoration : underline; 
} 
.accordian li h2 { 
cursor : auto; 
text-decoration : none; 
padding : 0px 0px 4px 22px; 
} 
.accordian li h2.jse { 
background-image : url(http://www.apus.edu/bin/m/p/toggle_arrow.gif); 
background-position : 4px -35px; 
background-repeat : no-repeat; 
} 
.accordian li h2:hover { 
cursor : pointer; 
text-decoration : underline; 
} 
.accordian li li { 
margin-bottom : 5px; 
margin-left : 0px; 
margin-top : 0px; 
padding : 0px; 
} 
.accordian li p { 
display : block; 
padding-top : 0px; 
padding-bottom : 15px; 
padding-left : 10px; 
margin-left : 30px; 
margin-top : 0px; 
} 
.accordian li ul { 
margin-bottom : 30px; 
margin-top : 0px; 
padding-top : 0px; 
padding-left : 0px; 
margin-left : 0px; 
} 
.accordian li.expanded h2.jse { 
background-position : 4px -5px; 
} 
.accordianContainer { 
margin-top : 0px; 
padding-top : 0px; 
} 
.accordianContainer h2 { 
padding : 3px; 
} 
.accordian_nolist { 
list-style : none; 
} 
</style> 

HTML

<table height="120"><tr><td>&nbsp;</td></tr></table> 

<div class="accordianContainer"> 
<ul class="accordian"> 
<li><h2>Title 1 Goes here - Example</h2> 
    <ul><li> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    </li></ul> 

</li> 
</ul> 
</div> 

<div class="accordianContainer"> 
<ul class="accordian"> 
<li><h2>Title 2 Goes here - Example</h2> 
    <ul><li> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    </li></ul> 

</li> 
</ul> 
</div> 

<div class="accordianContainer"> 
<ul class="accordian"> 
<li><h2>Title 3 Goes here - Example</h2> 
    <ul><li> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    </li></ul> 

</li> 
</ul> 
</div> 

<div class="accordianContainer"> 
<ul class="accordian"> 
<li><h2>Title 4 Goes here - Example</h2> 
    <ul><li> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    </li></ul> 
</li> 
</ul> 
</div> 

<div class="accordianContainer"> 
<ul class="accordian"> 
<li><h2>Title 5 Goes here - Example</h2> 
    <ul><li> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    </li></ul> 

</li> 
</ul> 
</div> 

Answer 1

.slideUp(100,function(){ if($(".accordian>li.expanded").length==0) performOpen(doOpen,targetNode); });

就在那裏......您選擇進行打開作爲回調至收盤...即。它在slideUp完成時觸發。你需要重做這個，所以他們運行我平行。沿着以下幾條線：

$(".accordian>li.expanded h2").parent().removeClass('expanded') 
    .end() 
    .nextAll() 
    .slideUp(100); 

if($(".accordian>li.expanded").length==0) { 
    performOpen(doOpen,targetNode); 
} 

這應該是這樣，他們大致在同一時間開火。

此外...有沒有原因爲什麼你不使用jquery-ui的手風琴部件？它很容易的風格和事件處理程序，你可以綁定你自己的東西，爲了這一切。 :-)

Answer 2

animate's queue argument？