gpt4 book ai didi

javascript - jQuery 扩展菜单

转载 作者:行者123 更新时间:2023-11-30 18:48:55 24 4
gpt4 key购买 nike

我有这个 html 代码:

<ul id="nav">
<li>Heading 1
<ul>
<li>Sub page A</li>
<li>Sub page B</li>
<li>Sub page C</li>
</ul>
</li>
<li>Heading 2
<ul>
<li>Sub page D</li>
<li>Sub page E</li>
<li>Sub page F</li>
</ul>
</li>
</ul>

使用这段 JS 代码:

$(function(){
$('#nav>li>ul').hide();
$('#nav>li').mouseover(function(){
if ($('#nav ul:animated').size() == 0) {
$heading = $(this);
$expandedSiblings = $heading.siblings().find('ul:visible');
if ($expandedSiblings.size() > 0) {
$expandedSiblings.slideUp(500, function(){
$heading.find('ul').slideDown(500);
});
}
else {
$heading.find('ul').slideDown(1000);
}
}
});
})

目前代码是这样工作的:单击标题 1 时,菜单会展开。单击标题 2 时,标题 2 子菜单展开,标题 1 子菜单关闭。我需要将其修改为:子菜单必须在鼠标移出时自动关闭。有人可以帮我吗?提前致谢!

最佳答案

这是一个略有不同的动画(模拟滑动,而不是一个接一个地滑动),但如果它是一个选项.hover()使用 mouseentermouseleave而不是 mouseovermouseout (对 child 开火)会简单得多,像这样:

$(function(){
$('#nav>li>ul').hide();
$('#nav>li').hover(function(){
$(this).find('ul').slideToggle(500)
.siblings().find('ul:visible').slideUp(500);
});
})

关于javascript - jQuery 扩展菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4561558/

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