Question

我编写了这段代码，当只有2个菜单时它可以正常工作，但只要有3或4个，slideToggle就会双滑动（闪烁）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"><html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {

    $('.menu').hide();

    $('#nav a').click(function(){
        var idvar = this.id;
        var menuid = '#menu_'+idvar;
        $('.menu').not(menuid).slideUp( function(){ 
            $(menuid).slideToggle(); 
        });
        return false;
    });
});
</script></head><body>

<div id="nav">
    <a href="#" id="dogs">Dogs</a>
    <a href="#" id="cats">Cats</a>
    <a href="#" id="horses">Horses</a>
    <a href="#" id="cows">Cows</a>
</div>

<div class="menu" id="menu_dogs">stuff about dogs</div>
<div class="menu" id="menu_cats">stuff about cats</div>
<div class="menu" id="menu_horses">stuff about horses</div>
<div class="menu" id="menu_cows">stuff about cows</div>

</body></html>

查看问题的演示:(删除任意两个菜单以查看其工作原理） http://jsfiddle.net/ANDXJ/

Answer 1

这一行是问题所在：

 $('.menu').not(menuid).slideUp( function(){ 
     $(menuid).slideToggle(); 
 });

您所说的是 - 对于不是当前菜单项的每个菜单项，请滑动文本，然后向下滑动当前菜单项。这是多次执行。因此你得到多次闪光的原因。你想这样做一次。所以将它分成不同的陈述。向上滑动所有菜单。然后滑下当前的一个。

在这里 - 这应该做你想要的。

$('#nav a').click(function() {
    var idvar = this.id;
    var menuid = '#menu_' + idvar;

    $('.menu').hide();        
    $(menuid).slideDown();
    return false;
});

Answer 2

就像mrtsherman所说，你试图滑动所有菜单项，你只需要向上滑动可见的菜单项。为了保持向上滑动向下滑动过渡，我必须添加更多逻辑。看看这个fiddle。

slideToggle带有2个以上菜单选项卡的双幻灯片

2 个答案: