Jquery显示/隐藏切换

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

这里有一个快速演示.基本上,您可以在使用:动画选择器继续下一个slideDown之前测试当前是否有任何div正在设置动画.

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

nb忽略文本跳转,因为这只是缺乏css