0

我正在尝试重新创建 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;
        });
    });     
});

问题是，如果有人点击链接一，那么链接二很快就会显示在页面上。任何时候都应该只显示一个部分。有什么想法可以解决这个问题吗？

感谢您的帮助。

4

2 回答 2

5

在这里为您快速演示。基本上，您可以在使用 :animated 选择器继续下一个 slideDown 之前测试是否有任何 div 当前正在制作动画。

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

nb 忽略文本跳转，因为这只是缺少 css

于 2009-06-24T11:06:50.267 回答
1

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

你可以使用这样的东西：

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

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

于 2009-06-24T10:54:35.720 回答