Question

我在使用多DIV菜单系统时遇到问题。我在同一页面上有3个div用于3个独立显示。默认情况下，显示“约”div。单击“联系人”或“恢复”时，“关于”div应在其他任何一个div向下滑动之前向上滑动。单击其他菜单选项将具有相同的结果。

这是页面的基本布局：

<div id="menutabs">
    <ul>
        <li><a href="#" name="divAbout"><span>About</span></a></li>
        <li><a href="#" name="divContact"><span>Contact</span></a></li>
        <li><a href="#" name="divResume"><span>Résumé</span></a></li>
    </ul>
</div>

容器div具有与链接名称匹配的ID。

jQuery：

$("a").click(function () {
    var divname = this.name;
    $("#"+divname).siblings(".contentbox").slideUp("slow", function() {
        $("#"+divname).slideDown("slow");
    });
    return false;
});

问题是我在页面上只编写了2个div的代码并且它工作得很好。在第一个div完成向上滑动之前，回调函数没有执行。但是，当我添加第3个div时，它不再等待。

我已经注释掉了多个div，以确认问题是在页面上只有3个div，因为它不会以这种方式行事，无论我留下哪两个div没有注释。

有什么想法吗？

Answer 1

问题是每个元素都会调用一次回调。

因此，如果有.contentbox个元素获得slideUp，那么您将在''＃'+ divname'上触发slideDown方法10次。这可能会导致意外问题。

为避免这种情况，您可以使用一个简单的变量作为标志。

$("a").click(function () { var divname = this.name; var has_run = false; $("#"+divname).siblings(".contentbox").slideUp("slow", function() { if( !has_run ) { $("#"+divname).slideDown("slow"); has_run = true; } }); return false; });

另一种解决方案是使用setTimeout代替slideUp的回调。

$("a").click(function () { var divname = this.name; $("#"+divname).siblings(".contentbox").slideUp("slow"); setTimeout(function() { $("#"+divname).slideDown("slow"); }, 600); return false; });

Answer 2

您可以使用jquery

 .delay()

使用毫秒值来获得更好的时间

$("#"+divname).siblings(".contentbox").slideUp(200).delay(300).end().slideDown(200);

例如

jQuery回调函数不等待完成

2 个答案: