Свернуть и Разложить Аккордеон одновременно, используя JQuery (демо) - PullRequest
Новая
       49

Свернуть и Разложить Аккордеон одновременно, используя JQuery (демо)

2 голосов
/ 30 марта 2010

Я застрял на аккордеоне 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>

Ответы [ 2 ]

0 голосов
/ 30 марта 2010
0 голосов
/ 30 марта 2010

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

...