【第四天学习】下拉菜单

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a {
            color: #bbb;
            text-decoration: none;
        }
        #nav {
            background-color: #000;
            height: 50px;
            line-height: 50px;
        }
        li {
            list-style: none;
            margin: 0 10px;
            float: left;
        }
        #nav > li> a:hover{
            color: #fff;
        }
        #nav > li {
            position: relative;
        }
        #nav > li > ul {
            position:absolute;
            width: 180px;
            border:1px solid crimson ;
            top: 50px;
            border-top: none;
        }
        #nav > li > ul > li a {
            display: inline-block;
            height: 50px;
            color: darkgrey;
        }
        ul.sub li:hover {
            background-color: darkorchid;
        }
        /* 初始化时不显示子菜单 */
        #nav li > ul {
            display: none;
        }
    </style>
</head>
<body>
    <ul id=”nav”>
        <li><a href=””>首页</a></li>
        <li><a href=””>喂养</a>
            <ul>
                <li><a href=””>喂养1</a></li>
                <li><a href=””>喂养2</a></li>
                <li><a href=””>喂养3</a></li>
                <li><a href=””>喂养4</a></li>
                <li><a href=””>喂养5</a></li>
                <li><a href=””>喂养6</a></li>
            </ul>
        </li>
        <li><a href=””>训练</a></li>
        <li><a href=””>疾病</a>
            <ul>
                <li><a href=””>疾病1</a></li>
                <li><a href=””>疾病2</a></li>
                <li><a href=””>疾病3</a></li>
                <li><a href=””>疾病4</a></li>
            </ul>
        </li>
        <li><a href=””>图片</a></li>
    </ul>
</body>
<script>
    // 获取nav里面的所有li
    const navs = document.querySelectorAll(“#nav > li”);
    // 监听事件
    navs.forEach(function (nav) {
    // 移入时显示
    nav.addEventListener(“mouseover”,showSubMenu);
    // 移除时关闭
    nav.addEventListener(“mouseout”,closeSubMenu);
    });
    // 委托事件
    function showSubMenu(ev) {
        console.log(ev.target);
        if (ev.target.nextElementSibling !== null) {
            ev.target.nextElementSibling.style.display = “block”;
        }
    }
    function closeSubMenu(ev) {
        if (ev.target.nodeName === “A” && ev.target.nextElementSibling !== null) {
            ev.target.nextElementSibling.style.display = “none”;
      }
    }
</script>
</html>

原创文章,作者:土豆是条哈士奇,如若转载,请注明出处:http://www.hashi7.com/women/shuoshuo/10789.html

发表评论

登录后才能评论