gpt4 book ai didi

jquery - SlideToggle 具有 2 个以上菜单选项卡的双幻灯片

转载 作者:行者123 更新时间:2023-12-01 08:20:20 26 4
gpt4 key购买 nike

我编写了这段代码,当只有 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/

最佳答案

这一行是问题所在:

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

关于jquery - SlideToggle 具有 2 个以上菜单选项卡的双幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7727553/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com