jquery之二级导航栏中mouseleave与mouseout的应用-创新互联

今天无聊写了个二级导航栏，发现了一个以前根本没注意的问题，那就是mouseleave的事件。故记录在此，菜鸟飘过。

曲水网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作，到程序开发，运营维护。创新互联自2013年起到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

二级导航栏的功能无非就是鼠标至于某标题上时，显示其若干子标题，离开某标题至于另外一标题时，显示对应的子标题并隐藏其他的子标题。还有，就是鼠标离开所有的标题或子标题时，应隐藏所有的子标题。

一开始便全用mouseover和mouseout事件处理，但发现鼠标离开所有的标题或子标题时，最后一次显示出的子标题没有被隐藏。body代码如下：

[html] view plaincopy

1. <ul class="ul_list">

2.   <li class="li_list">main</li>

3. </ul>

4. <ul class="ul_list">

5.   <li class="li_list">Autobots</li>

6.   <li class="sub_li">Optimus Prime</li>

7.   <li class="sub_li">Bumble Bee</li>

8.   <li class="sub_li">Ironhide</li>

9.   <li class="sub_li">Jazz</li>

10. </ul>

11. <ul class="ul_list">

12.   <li class="li_list">Decepticons</li>

13.   <li class="sub_li">Megatron</li>

14.   <li class="sub_li">Shockwave</li>

15.   <li class="sub_li">Soundwave</li>

16.   <li class="sub_li">Starscream</li>

17. </ul>

CSS如下：

[css] view plaincopy

1. .ul_list{

2.     width:200px;

3.     float:left;

4.     text-align:center;

5.     padding:0;

6.     position:relative;}

7. .li_list{

8.     list-style:none;

9.     text-align:center;

10.     background:#CCC;

11.     height:40px;

12.     line-height:40px;

13.     font-size:18px;

14.     font-family:黑体;

15.     color:#000000;

16.     cursor:pointer;

17.     position:relative;}

18. .sub_li{

19.     list-style:none;

20.     text-align:center;

21.     background:#CCC;

22.     height:40px;

23.     line-height:40px;

24.     font-size:18px;

25.     font-family:黑体;

26.     color:#000000;

27.     display:none;

28.     cursor:pointer;

29.     position:relative;}

JS如下：

[javascript] view plaincopy

1. $(document).ready(function(e) {

2.         $(".li_list").mouseover(function(){

3.             $(this).siblings(".sub_li").show("slow");

4.             $(this).parent(".ul_list").siblings(".ul_list").children(".sub_li").hide("slow");

5.         });

6.         $(".ul_list").<span style="color:#ff6666;">mouseout</span>(function(){

7.             $(this).children(".sub_li").hide("slow");

8.         });

9.         $(".sub_li").mouseover(function(){

10.             $(this).css({"border-top":"1px #FFFFFF solid",

11.                         "border-bottom":"1px #FFFFFF solid"});

12.         });

13.         $(".sub_li").mouseout(function(){

14.             $(this).css("border", "none");

15.         });

16.     });

试了一些方法也不行，后来把上述第二项的mouseout事件改为mouseleave则可以，查了资料，mouseout是不论鼠标指针离开被选元素或其子元素，都被触发；而mouseleave是只有在鼠标指针离开被选元素时，才触发。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享文章：jquery之二级导航栏中mouseleave与mouseout的应用-创新互联
文章来源：https://www.cdcxhl.com/article28/dedhcp.html

成都网站建设公司_创新互联，为您提供品牌网站制作、商城网站、做网站、外贸建站、虚拟主机、网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联