jquery - JQueryを使用してアコーディオンの折りたたみと展開を同時に行う（デモ）

Question

JQueryを使用したExpand/Collapseアコーディオンで立ち往生しています。

最初の見出しをクリックして展開した後、別の見出しをクリックすると、最初に前の見出しが完全に折りたたまれ、次にクリックした見出しが展開されます。この最初に折りたたんでから2番目に展開する手法は非常に気が散ります。見出しが拡大すると、最初の見出しが折りたたまれるはずです。私は何が欠けていますか？

ここでデモを体験できます

以下は私のすべての仕事です>>

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>

score 0 · Accepted Answer

.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 のアコーディオンウィジェットを使用していない理由はありますか? スタイルを設定するのは非常に簡単で、これらすべてのために独自のものをバインドできるイベントハンドラーがあります。:-)

score 0 · Accepted Answer

0

animate の queue 引数はどうですか？

于 2010-03-30T13:57:40.513 に答える

jquery - JQueryを使用してアコーディオンの折りたたみと展開を同時に行う（デモ）

2 に答える 2

Related

Reference