问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

我的二级菜单下拉效果如何优化？

头像
青衿
    343123140

    我的菜单效果如下：
    点击预览
    现在我的情况是鼠标从一级指向二级的时候二级就会消失，二级的ul明明是在上级li里，为什么mouseenter不能持续有效。

    javascriptcss
    阅读 3.3k
    1 个回答
    得票最新
    头像
    kikong
      19.1k31320
      ✓ 已被采纳

      mouseenter和mouseleave是不支持事件冒泡的

      在鼠标从1级菜单中移除时，设置一个延时时间例如100毫秒，延时二级菜单的隐藏
      添加对子菜单的mouseenter/mouseleave事件监听
      在mouseenter清除定时器
      mouseleave时将自己隐藏

      <!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../script/jquery-2.1.3.min.js"></script>
    <script>

         $(function(){
             //二级菜单展开效果
             var menuTimer;
             $('ul#menu-zhuyao>li').mouseenter(function() {
                 $('ul.sub-menu', this).show();
             });

             $('ul#menu-zhuyao>li').mouseleave(function() {
                 var that=this;
                 menuTimer=setTimeout(function(){
                     $('ul.sub-menu', that).hide();
                 },100);
             });

             $('ul.sub-menu').mouseenter(function() {
                 menuTimer&&clearTimeout(menuTimer);
             });

             $('ul.sub-menu').mouseleave(function() {
                 $(this).hide();
             });

         });

    </script>
    <title></title>
    <style>
        ul{
            list-style-type:none;
            margin:0;
            padding:0;
        }
        .menu-zhuyao-container {
            width: 300px;
            height:300px;
            position: absolute;
            top: 30px;
            background:#555;
        }
        ul#menu-zhuyao {
            padding: 0;
            margin: 0 auto;
            display: table;
        }
        ul#menu-zhuyao>li {
            float: left;
            margin: 20px;
            height: 20px;
            color: #fff;
            font-size: 15px;
            list-style-type: none;
            border-bottom: 2px solid #fff;
            position: relative;
        }

        ul#menu-zhuyao>li:hover {
            border-bottom: 2px solid #24ABEB;
        }

        ul#menu-zhuyao li a {
            color: #fff;
            cursor: pointer;
        }

        ul#menu-zhuyao li a:hover {
            color: #24ABEB;
        }

        .current-menu-item {
            border-bottom: 2px solid #24ABEB;
        }

        ul#menu-zhuyao ul.sub-menu {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 40px;
            z-index: 9;
            display: none;
            background-color: #fff;
            padding: 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        ul#menu-zhuyao ul.sub-menu::before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: -10px;
            left: 50%;
            margin-left: -10px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #fff;
            z-index: 2;
        }

        ul#menu-zhuyao ul.sub-menu::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: -11px;
            left: 50%;
            margin-left: -10px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #ddd;
            z-index: 1;
        }

        ul#menu-zhuyao ul.sub-menu>li {
            list-style-type: none;
            width: 80px;
            padding: 0;
            margin: 5px;
            text-align: center;
        }

        ul#menu-zhuyao ul.sub-menu>li a {
            color: #333;
        }

        ul#menu-zhuyao ul.sub-menu>li a:hover {
            color: #24abeb;
        }

    </style>
</head>
<body>

<div class="menu-zhuyao-container">
    <ul id="menu-zhuyao" class="menu">
        <li class="menu-item"><a href="#">一级1</a>
            <ul class="sub-menu" style="display: none;">
                <li class="menu-item"><a href="#">二级1</a></li>
                <li class="menu-item"><a href="#">二级1</a></li>
                <li class="menu-item"><a href="#">二级1</a></li>
            </ul>
        </li>
        <li class="menu-item"><a href="#">一级2</a>
            <ul class="sub-menu" style="display: none;">
                <li class="menu-item"><a href="#">二级2</a></li>
                <li class="menu-item"><a href="#">二级2</a></li>
                <li class="menu-item"><a href="#">二级2</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题