Question

我正在尝试重新创建BBC主页上显示的效果，其中链接“添加更多此页面”和“设置位置”幻灯片打开其相应的div并显示其相关内容。如果您选择“向此页面添加更多内容”，则会滑动“添加更多”部分。如果您再次选择“向此页面添加更多内容”，则会关闭“添加更多”部分。但是，如果“添加更多”部分已打开，并且您选择“设置位置”，则会在向下滑动“设置位置”选项之前滑动“添加更多”部分。

我设法使用以下代码重新创建此效果：

HTML

    <ul id="demo">
        <li><a href="#sectionOne">Link One <span class="rm">this site</span></a></li>
        <li><a href="#sectionTwo">Link Two</a></li>
        <li><a href="#sectionThree">Link Three</a></li>                 
    </ul>

    <div id="siteCustomisation">
        <div class="siteSelection" id="sectionOne">
            <h3>Section One</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue tincidunt tortor, id condimentum massa scelerisque id. Cras elit magna, posuere at sollicitudin in, tristique nec turpis.</p>
        </div>
        <div class="siteSelection" id="sectionTwo">
            <h3>Section Two</h3>
            <p>Maecenas condimentum tincidunt pretium. Ut est ipsum, pharetra quis congue eu, eleifend vitae velit. Vestibulum quam purus, posuere quis vehicula ut, sollicitudin vel urna.</p>
        </div>
        <div class="siteSelection" id="sectionThree">
            <h3>Section Three</h3>
            <p>Nulla id nisi eget urna gravida euismod. Mauris tempor, diam ullamcorper sagittis eleifend, urna mauris scelerisque massa, placerat sagittis massa augue nec purus.</p>
        </div>                                  
    </div>

Jquery代码

$(function(){
    $("#siteCustomisation .siteSelection").hide();

    $("#demo li a").each(function(index) {
        $(this).click(function() {  
            var id = $(this).attr('href');
            var $thisDiv = $(id);

            if ($thisDiv.siblings(':visible').length) { 
                $thisDiv.siblings(':visible').slideUp(700, function() {
                    $thisDiv.slideDown();
                });
            } else {    
                $thisDiv.slideToggle();         
            }
            return false;
        });
    });     
});

问题是，如果有人点击链接一，然后快速链接两个div然后显示在页面上。始终只能显示一个部分。我有什么想法可以解决这个问题吗？

感谢您的帮助。

Answer 1

为您快速演示here。基本上，您可以在使用：动画选择器继续下一个slideDown之前测试当前是否有任何div正在设置动画。

还要注意我使用.live的方式。这比将相同的事件处理程序附加到多个元素更好。

n.b忽略文本跳转，因为这只是缺少css

Answer 2

您可以在开始滑动时禁用单击事件，并在滑动完成时重新启用它。更简单的是，您可以将全局变量用作“锁定”。滑动开始时将其设置为false，结束时将其重新设置为true。当变量为false时，不允许滑动任何div。您必须对所有动画使用回调。

您可以使用以下内容：

animationStarted = true;
$thisDiv.slideToggle(function() {   
   animationStarted = false; 
});

所有“动画”方法（slideToggle，slideDown）都接受一个回调函数作为参数，当它们执行的效果完成时调用它。

Jquery显示/隐藏切换

2 个答案: