slideToggle带有两个以上菜单选项卡的双滑块

我写了这段代码，当只有2个菜单时它工作正常，但只要有3或4，slideToggle双滑动（闪烁）。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/

来源

2011-10-11 Adam Hunter Peck

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

来源

2011-10-11 14:59:10

谢谢！这个答案成功地保持了按钮切换幻灯片的功能，所以如果Cat已经打开，并且我点击Cat按钮，Cat就会关闭。 –

是的，我以为你可能想要:-)代码可以使用一些调整，但它涵盖了所有场景。 –

这条线的问题是：

$('.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; 
});

来源

2011-10-11 14:40:03 mrtsherman

感谢您解释多次执行的问题。 –

slideToggle带有两个以上菜单选项卡的双滑块

回答

相关问题