导航下拉菜单

实现一个导航下拉菜单

1. 先用ul、li等标签把导航内容打上

        <ul id="nav">
            <li><a href="">首页</a></li>
            <li><a href="">视频教程</a></li>
            <li>
                <a href="">资源下载</a>
                <ul>
                    <li><a href="">php工具</a></li>
                    <li><a href="">在线手册</a></li>
                    <li><a href="">学习课件</a></li>
                    <li><a href="">网站源码</a></li>
                </ul>
            </li>
            <li><a href="">社区问答</a></li>
            <li>
                <a href="">技术文章</a>
                <ul>
                    <li><a href="">头条</a></li>
                    <li><a href="">博客</a></li>
                    <li><a href="">php教程</a></li>
                    <li><a href="">php框架</a></li>
                </ul>
            </li>
        </ul>

   

2. 标签样式写上

    <style>
        /* 元素样式初始化 */
        *{
            margin: 0;
            padding: 0;
            /* box-sizing: border-box; */
        }
        a{
            color: #bbbbbb;
            text-decoration: none;
        }
        #nav{
            background-color: #000000;
            height: 10vh;
            line-height: 10vh;
        }
        li{
            list-style: none;
            margin: 0 10px;
            float: left;
        }
        #nav>li>a:hover{
            color: #ffffff;
        }
        /* 将父级设置为菜单的定位容器，转为定位元素 */
        #nav>li{
            position: relative;
        }
        #nav>li>ul{
            position: absolute;
            top: 10vh;
            width: 180px;
            border: 1px solid #aaaaaa;
            border-top: none;
        }
        #nav>li>ul>li a{
            display: inline-block;
            height: 10vh;
            color: #444444;
        }
        ul.sub li:hover{
            background-color: #eeeeee;
        }
        /* 初始化时不显示子菜单 */
        #nav>li>ul{
            display: none;
        }
    </style>

   

3.js添加事件

<script>
    // 获取所有的主导航
    const navs = document.querySelectorAll("#nav > li");
    navs.forEach(function(nav){
        // 鼠标移入事件
        nav.addEventListener('mouseover',showSubMenu);
        // 鼠标移出事件
        nav.addEventListener('mouseout',hideSubMenu);
    })
    //显示子菜单
    function showSubMenu(ev){
        // 判断当前导航有没子菜单
        if(ev.target.nextElementSibling!=null){
            ev.target.nextElementSibling.style.display='block';
        }
    }
    //隐藏子菜单
    function hideSubMenu(ev){
        // 判断当前导航有没子菜单
        if(ev.target.nextElementSibling!=null){
            ev.target.nextElementSibling.style.display='none';
        }
    }
</script>

但这时出现了冒泡事件，子菜单的显示和隐藏事件冒泡到主菜单

解决方法—给隐藏事件加个判断，是否是触发到a标签

    //隐藏子菜单
    function hideSubMenu(ev){
        // console.log(ev.target.nodeName);
        // 判断当前导航有没子菜单
        if(ev.target.nodeName==='A' && ev.target.nextElementSibling!=null){
            ev.target.nextElementSibling.style.display='none';
        }
    }

然后就成功了