使用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？