导航下拉隐藏问题，两个div同时触发事件

最新推荐文章于 2020-02-14 14:37:40 发布

原创最新推荐文章于 2020-02-14 14:37:40 发布 · 477 阅读

0 ·

CC 4.0 BY-SA版权

web开发同时被 3 个专栏收录

39 篇文章

订阅专栏

19 篇文章

订阅专栏

html+css

8 篇文章

订阅专栏

本文介绍了一种使用JavaScript和jQuery实现的下拉菜单显示与隐藏效果的方法。通过监听鼠标悬停和移出事件，结合定时器来控制下拉菜单的显示与隐藏，实现了平滑的用户体验。

解决进入下拉区域不隐藏；离开导航菜单div，不进入下拉，隐藏下拉div。

var timer = null;
//导航栏里div
$('.dhxlcd').mouseenter(function () {
    clearTimeout(timer);
    $('.sec_ul').css('display','block');
}).mouseleave(function () {
    timer = setTimeout(function(){
        $('.sec_ul').hide();
    },100)
});
//下拉菜单div
$('.sec_ul').mouseenter(function () {
    clearTimeout(timer);
    $('.sec_ul').css('display','block');
}).mouseleave(function () {
    timer = setTimeout(function(){
        $('.sec_ul').hide();
    },100)
});