Свернуть и развернуть Accordion одновременно с помощью JQuery (демонстрация)

Я застрял на аккордеоне Expand / Collapse с помощью JQuery.

После того, как начальный заголовок будет нажат, и он развернется, если вы нажмете на другой заголовок, он полностью свернет прежний заголовок ПЕРВЫМ, затем он развернет заголовок, который вы щелкнули. Этот метод сначала свернуть, а затем развернуть второй, очень отвлекает, и что должно произойти, когда заголовок расширяется, он должен сжимать исходный заголовок. Что мне не хватает?

Вы можете ознакомиться с демонстрацией здесь

Ниже представлены все мои работы >>

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>

jquery collapse accordion expand
person Evan    schedule 30.03.2010    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Как насчет аргумента очереди анимации?

person easement    schedule 30.03.2010

arrow_upward
0
arrow_downward

.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? Его довольно легко стилизовать, и у него есть обработчики событий, к которым вы можете привязать свои собственные вещи для всего этого. :-)

person prodigitalson    schedule 30.03.2010