如果让子菜单延迟消失?

justPassBy
  • 572

下面是我自己所写的代码,只有“首页”这个菜单的子菜单设置了延时消失。

但是有bug啊啊啊啊啊。当鼠标移到第一个主菜单时,该菜单的子菜单出现了,然后再把鼠标移到第二个子菜单,然后该菜单的子菜单也出现了。
但是问题是第一个主菜单的子菜单设置了延迟消失,然后就出现问题了。 具体如何解决呢?
图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        ul{
            list-style: none;//取消样式
            margin: 0px;
            padding: 0px;
        }
        li{
            float: left;
        }
        a{
            text-decoration: none;
        }
        
        #nav-div{
            width: 500px;
            height: 40px;
            background: lavender;
            margin: auto;
            border-bottom: solid 3px paleturquoise;
        }
        #nav-div ul li{
            margin-left: 2px;
            width: 78px;
            height: 40px;
            
        }
        #nav-div ul li a{
            display: block;
            width: 78px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        #nav-div ul li ul{
            
            border:1px solid #ccc; 
            position: absolute;
            display:  none;
        }
        #nav-div ul li ul li{
            display: block;
            float: left;
        }
        
        #nav-div ul li:hover ul{
            display: block;
        }
        
        //出现底部的指示线
        #nav-div ul li:hover{
            border-bottom: solid 3px palevioletred;
            
        }
    </style>
    <body>
        <div id="nav-div">
            <ul>
                <li class="link1">
                    <a id="shouye" href="#">首页</a>
                    <ul id="shouye_sub">
                        <li><a href="#">最近更新</a></li>
                        <li><a href="#">活动</a></li>
                        <li><a href="#">最近更新</a></li>
                        <li><a href="#">学员反馈</a></li>
                    </ul>        
                </li>
                <li>
                    <a href="#">关于我们</a>
                    <ul>
                        <li><a href="#">妙味讲师</a></li>
                        <li><a href="#">培训方式</a></li>
                        <li><a href="#">培训理念</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>        
                </li>
                <li>
                    <a href="#">作品</a>
                    <ul>
                        <li><a href="#">般固</a></li>
                        <li><a href="#">MATRIK</a></li>
                        <li><a href="#">留学e网</a></li>
                        <li><a href="#">ECMall</a></li>
                    </ul>        
                </li>
                <li>
                    <a href="#">博客</a>
                    <ul>
                        <li><a href="#">JS教程</a></li>
                        <li><a href="#">弹出效果</a></li>
                        <li><a href="#">标签云</a></li>
                        <li><a href="#">计算器</a></li>
                        
                    </ul>        
                </li>
                <li style="float: right;">
                    <a href="#">&lt;&lt;更多</a>        
                </li>
            </ul>
        </div>
        
    </body>
    <script type="text/javascript">
        var shouye = document.getElementById("shouye");
        shouye.onmouseout = function(){
            setTimeout(function(){
                document.getElementById("shouye_sub").style.display = "none";
            },1000);
        }
        shouye.onmouseover = function(){
            
            document.getElementById("shouye_sub").style.display = "block";
        }
    </script>
</html>
回复
阅读 3.3k
1 个回答
shouye.onmouseover = function(){
            // step0. clearTimeout(this.timer);
            // step1. 隐藏所有的子菜单
            // step2. 显示当前菜单下的子菜单
}

shouye.onmouseout = function(){
            this.timer = setTimeout(function(){
                document.getElementById("shouye_sub").style.display = "none";
            },1000);
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏