javascript - 自制 Accordion 应在打开新菜单项之前折叠打开的菜单项

Question

我现在正在学习 jQuery，第一个“更大”的项目是一个自制的 Accordion /滑动导航。

我的 HTML 代码如下所示:

<dl>
 <dt><a href="#">Prologue</a></dt>
<dd id="prolog">
 <div>TEST</div>
</dd>

<dt><a href="#">Projekte</a></dt>
<dd id="projekte">
 <ul>
     <li>TEST</li>
        <li>TEST</li>
        <li>TEST</li>
        <li>TEST</li>
</ul>
</dd>

<dt><a href="#">Fotografie</a></dt>
<dd id="fotos">
 <ul>
     <li>TEST</li>
        <li>TEST</li>
        <li>TEST</li>
        <li>TEST</li>
</ul>
</dd>

<dt><a href="#">Analog</a></dt>
<dd id="analog">
 <ul>
     <li>TEST</li>
        <li>TEST</li>
        <li>TEST</li>
        <li>TEST</li>
</ul>
</dd>

<dt><a href="#">Über mich</a></dt>
<dd id="about">
 <ul>
     <li>TEST</li>
        <li>TEST</li>
        <li>TEST</li>
        <li>TEST</li>
</ul>
</dd>

<dt><a href="#">Kontakt</a></dt>
<dd id="kontakt">
 <ul>
     <li>TEST</li>
        <li>TEST</li>
        <li>TEST</li>
        <li>TEST</li>
</ul>
</dd>

这里是 jQuery 代码。这个想法是检查用户是否单击了打开的 Accordion 项目，如果单击，则将其关闭。否则(当单击的项目关闭时)它会检查是否有任何其他 Accordion 项目打开。如果它们全部隐藏，则会打开单击的项目。否则，它将关闭所有项目(不知道如何仅获取打开的项目)并打开单击的项目。这是它的样子:

$("dt a").click(function(){

var checkElement = $(this).parent("dt").next("dd");

var main1 = $('#prolog'); var main2 = $('#projekte'); var main3 = $('#fotos'); var main4 = $('#analog'); var main5 = $('#about'); var main6 = $('#kontakt');

if(checkElement.is(':visible')) {
    $(this).parent("dt").next("dd").slideUp("normal"); 
    return false
} else {
    if( (main1.is(':hidden')) &&
        (main2.is(':hidden')) &&    
        (main3.is(':hidden')) &&
        (main4.is(':hidden')) &&
        (main5.is(':hidden')) &&
        (main6.is(':hidden')) ) {$(this).parent("dt").next("dd").slideDown("normal");}
    else {
        $("dd").slideUp("normal"), checkElement.slideDown("normal");
    }

    return false;
};

});

到目前为止，它工作得很好(虽然第二个带有一堆变量的 if-request 看起来不太专业，如果你能在这里帮助我，那就太好了，尽管这不是主要问题)。下一个目标是将 Accordion 项目的关闭和打开连续进行。我想要先上幻灯片，完成后，应该开始下幻灯片。所以我改变了

else {
        $("dd").slideUp("normal"), checkElement.slideDown("normal");
    }

至

else {
   $("dd").slideUp("normal", function() { checkElement.slideDown('normal') });
}

但是错误来了:它首先同时关闭+打开，之后，它会连续执行相同的操作(就像我想要的那样)。看起来这部分功能它执行了两次，但一次是同时执行的，然后是连续执行的。我只是不明白第一个同步动画来自哪里。特别是因为如果函数不是连续的，它就可以正常工作(无需执行两次相同的操作)。

如果有人能帮助我，那就太好了。

问候
卢卡斯

PS:请不要让我看到完成的 Accordion (插件)，我想学习和理解创建一个!

PS2:抱歉我的英语不好，我来自德国。 ;-)

PS3:我稍后会去度假，但10天后我会回来!

Answer 1

当您调用此方法时:

 $("dd").slideUp()

您正在为所有调用它 <dd>元素，有些已经隐藏，立即完成并立即运行回调，所以只需为可见的元素设置动画，如下所示:

$("dd:visible").slideUp("normal", function() {
  checkElement.slideDown("normal");
});

这解决了眼前的问题( test here )。不过，这是一个整体更紧凑的版本:

$("dt a").click(function(){
    var dd = $(this).parent("dt").next("dd");
    if(!$("dd:visible").slideUp(function() { dd.slideDown(); }).length)
      dd.slideDown();    
    return false;
});​

You can give it a try here .