使用 JQuery 同时折叠和展开 Accordion（演示）

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 完成时触发。 Youd 需要返工，以便他们并行运行。大致如下：

$(".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怎么样？