jQuery鼠标移入移出触发下拉菜单优化技巧详解

日期：2024-12-11 05:27:06 作者：创始人浏览：0

Jquery鼠标经过按钮显示下拉菜单问题。

应将“进入和离开按钮”触发事件更改为“进入和离开div（按钮根节点）”触发事件

JQuery鼠标移到一个层上显示另一个层问题

你好！

解决问题的第一个想法：为每个一级菜单设置悬停事件没有问题，但是代码中显示的二级菜单变成了全局菜单。
。
因此必须改为当前一级菜单中的$(".subCategory")元素，即$(一级菜单).find(".subCategory")--->>>仅此情况显示为当前一级二级菜单。

解决问题的第二种思路：由于hover事件中的动画效果不能高效完成，因此会在函数队列中顺序执行。
使用stop函数可以有效终止它们并直接返回。
最后的执行结果。

详细信息见附件~

鼠标滑过显示导航栏显示菜单

将鼠标滑过导航栏可下拉三级菜单。
使用的功能包括：悬停效果、追加元素、显示、隐藏、上拉、下拉等；！记得引入jQuery插件！记得引入jQuery插件！布局：所有团购页面首页二级菜单二级菜单两个一级菜单二级菜单二级菜单餐饮服务

菜单级别两个li>二级菜单二级菜单二级菜单二级菜单娱乐娱乐

二级菜单二级菜单二级菜单子菜单子菜单保存位置旅游住宿

二级菜单二级菜单二级菜单二级菜单二级菜单生活服务

二级菜单二级菜单二级菜单二级菜单二级菜单制作beautiful

二级菜单二级菜单二级菜单二级菜单二级菜单产品

二级菜单二级菜单二级菜单二级菜单一级菜单两个

样式：body,ul,ol,li{margin:0;padding:0;list-style:none;}#content{背景:#A12201;}.ul_one{宽度:80%;边距:自动;}.ul_one:after{内容:'';显示y:block;clear:both;}.ul_one>li{float:left;height:40px;line-height:40px;text-align:center;width:100px;color:#fff;font-weight:bold;border-right:1pxsolid#931900;}.ul_one>li:hover{背景:#6C1500;}ol{背景:#6C1500;宽度:100px;显示:none;border:1pxsolid#6C1500}ol>li{位置:相关;}.all{背景:#D03322;padding:040px;}.all_one{padding:010px;}.con_t{color:#666;position:absolute;left:100px;top:0;border:2pxsolid#6C1500;width:200px;}.con_tli{background:#D03322;border-Bottom:1pxdashed#000;}js逻辑：concatenationevent$('ul>li').hover(function(){//移动到当前元素的子元素并下拉$(this).children()。
stop().slideDown();},functionn(){//移除当前元素的子元素并将其向上拉$(this).children().stop().slideUp();})$('ol>li').hover(function(){//移动当前元素的子元素显示$(this).children().stop().show();//修改背景色和字体颜色当前元素的$(this).css({'background':'#fff','color':'#000'});//创建元素var$div=$('第三级菜品单层三级菜单三级菜单三级菜单');$div.appendTo($（这));},function(){//删除当前元素的子元素并隐藏$(this).children().stop().hide();//留空背景色和字体颜色$(this).css({'background':'','color':''});//删除类名$(this).children('.cont_t').remove();})