jquery ul的mouseout事件

今天碰到个jquery的mouseout事件的问题,弄了半天总算解决了。

jquer ul li 好像绑定ul的mouseout事件,离开第一个li后就会触发。

后来在网上查了下叫事件冒泡,改成使用mouseleave即可。mouseover也有冒泡。改用mouseenter。

因为bind方法可以屏蔽浏览器的一些事件冒泡行为。另外,ie支持mouseenter,mouseleave事件,firefox等不支持,但通过jquery的这种方式后,所有浏览器均支持上面的语法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是实现你所描述的HTML页面及jQuery代码: ```html <!DOCTYPE html> <html> <head> <title>Navigation Bar</title> <style> ul { list-style: none; margin: 0; padding: 0; } li { float: left; position: relative; padding: 10px; background-color: #eee; border-right: 1px solid #ccc; } li:hover { background-color: #ccc; cursor: pointer; } ul ul { display: none; position: absolute; top: 100%; left: 0; background-color: #eee; } ul ul li { float: none; border-bottom: 1px solid #ccc; padding: 5px; } </style> </head> <body> <ul> <li>Home</li> <li>About <ul> <li>Company</li> <li>Team</li> </ul> </li> <li>Services <ul> <li>Web Design</li> <li>SEO</li> <li>Social Media</li> </ul> </li> <li>Contact</li> </ul> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $("li").mouseover(function() { $(this).children("ul").slideDown(); }); $("li").mouseout(function() { $(this).children("ul").slideUp(); }); }); </script> </body> </html> ``` 这个页面包含一个无序列表,其中每个列表项都是一个导航标签。在“About”和“Services”两个标签中,还嵌套了另一个无序列表,表示下拉菜单。CSS样式设置使得导航条呈现从左到右的排列效果,并且鼠标移到某个标签,下拉菜单垂直滑动显示;鼠标移出,下拉菜单垂直滑动隐藏。 使用jQuery的$()函数获取所有li元素,并使用mouseover()和mouseout()方法分别绑定鼠标移入和移出事件处理程序。当鼠标移到某个标签上,使用children()方法获取它的子元素ul并应用slideDown()方法进行显示;当鼠标移出,使用同样的方法应用slideUp()方法进行隐藏。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值