Jquery 下拉菜单移入移出特效

最新推荐文章于 2024-10-02 10:11:21 发布

九幽之君

最新推荐文章于 2024-10-02 10:11:21 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ASP.Net分区

本文链接：https://blog.youkuaiyun.com/jiuyou_robin/article/details/35258237

ASP.Net分区专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS实现的平滑二级菜单显示效果。通过设置定时器及鼠标悬停事件，实现了二级菜单的平滑展开与收起，并为菜单项添加了背景颜色变化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var menu_trigger;//声明定时器

function menuShow() {
$(".OneMenu li").each(function () {//便利要循环的元素
var currentOneMenu = $(this);//存储当前对象

$(this).mouseenter(function () { //调用移入事件，mouseenter只对目标元素起作用，所以不会发生冒泡事件

menu_trigger = setTimeout(function () { //设置定时器200毫秒后执行，
currentOneMenu.find("ul").slideDown(500); //特效显示二级菜单延时0.5秒
currentOneMenu.find("ul li").each(function () {
$(this).mousemove(function () { //对二级层绑定事件
$(this).css("background-color", "#EAEAEA"); //改变当前层颜色
});
});
}, 200); //这里200就是间隔0.2秒

}).mouseleave(function () { //移出事件，同样只对目标元素起作用

clearTimeout(menu_trigger); //清除将要在0.2秒后执行的显示二级菜单动作

//隐藏二级菜单层

$(this).find("ul").slideUp(500);

$(this).css("background-color", ""); //改变当前层颜色

});

}

html 代码
<ul class = "OneMenu">
<li><a href="Home.aspx">首页</a>
</li>
<li><a >产品服务</a>
<ul class="TwoMenu">
<li><a href="TradingFAQ.aspx">交易常见问题</a></li>
<li><a href="OvernightInterest.aspx">隔夜利息</a></li>
<li><a href="DGMMarketSpreads.aspx">DGM市场点差</a></li>
<li><a href="ExchangeMarket.aspx">外汇市场</a></li>
<li><a href="MarginTrading.aspx">什么是保证金交易</a></li>
</ul>
</li>
<li><a href="MT4MobileTrading.aspx">交易平台</a>
<ul class="TwoMenu">
<li><a href="MT4MobileTrading.aspx">MT4 移动交易</a></li>
<li><a href="TransactionPlatform.aspx">交易平台</a></li>
</ul>
</li>
<li><a >账户服务</a>
<ul class="TwoMenu">
<li><a href="DepositAccounts.aspx">账户入金</a></li>
<li><a href="CreateLiveAccount.aspx">开设真实账户</a></li>
<li><a href="Withdrawal.aspx">账户出金</a></li>
<li><a href="DownloadForms.aspx">表格下载</a></li>
</ul>
</li>
<li><a >合作伙伴</a>
<ul class="TwoMenu">
<li><a href="WhiteLabelProgram.aspx">白标计划</a></li>
<li><a href="AccountManagement.aspx">多账户管理</a></li>
<li><a href="AgentsCooperationProgramme.aspx">代理商合作计划</a></li>
<li><a href="SmartTransactionSystems.aspx">智能交易系统</a></li>
<li><a href="InvestorRelations.aspx">投资者关系</a></li>
</ul>
</li>
<li><a ">关于我们</a>
<ul class="TwoMenu">
<li><a href="EVENTS.aspx">活动公告</a></li>
<li><a href="ContactUs.aspx">联系我们</a></li>
</ul>
</li>
</ul>