js实现导航栏的下拉表单

用js实现鼠标经过时下拉表单显示隐藏代码含详细注释可运行主要思路就是获取下拉表单之后鼠标在就显示，不在就隐藏，js代码比较简单，反而是css比较多，下面给出完整代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatibl

Sarnwan

5548人浏览 · 2021-07-02 23:23:20

Sarnwan · 2021-07-02 23:23:20 发布

用js实现鼠标经过时下拉表单显示隐藏

代码含详细注释

可运行

主要思路就是获取下拉表单之后鼠标在就显示，不在就隐藏，js代码比较简单，反而是css比较多，下面给出完整代码

<!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;
        }

        #nav {
            list-style-type: none;
            margin: 100px;
        }

        #nav>li {
            float: left;
            padding: 0;
            margin: 0;
            position: relative;
        }

        #nav>li>a {
            /* display: inline-block; */
            color: white;
            background-color: black;
            padding: 18px;
            text-decoration: none;
            text-align: center;
        }

        #nav>li>a:hover {
            background-color: rgb(14, 13, 13, .5);
        }

        #nav ul {
            display: none;
            position: absolute;
            left: 0;
            top: 38px;
            list-style-type: none;
            width: 100%;
        }

        #nav ul li {
            padding: 0;
            margin: 0;
        }

        #nav ul li a {
            display: block;
            text-decoration: none;
            padding: 15px;
            border: 1px solid rgb(187, 181, 181, .5);
            border-top: none;
            text-align: center;
        }

        #nav ul li a:hover {
            background-color: rgb(187, 181, 181, .7);
        }
    </style>
</head>

<body>
    <!-- 啊哈,这个呢主要的结构就是ul>li>a ul -->
    <ul id="nav">
        <li>
            <a href="">首页真的吗</a>
            <ul>
                <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>
            </ul>
        </li>
        <li>
            <a href="">收藏</a>
            <ul>
                <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>
            </ul>
        </li>
    </ul>
    <script>
        // 效果：鼠标经过，显示下拉表单
        //获取事件源 li,
        var nav = document.getElementById('nav');
        // 获取nav的亲孩子
        var lis = nav.children;
        for (var i = 0; i < lis.length; i++) {
            // 主意啊注意，你他妈给我用this，还有lis有两孩子一个是a另一个是ul
            // onmouseover鼠标移入
            lis[i].onmouseover = function () {
                this.children[1].style.display = 'block';
            }
            // onmouseout鼠标移出
            lis[i].onmouseout = function () {
                this.children[1].style.display = 'none';
            }
        }
    </script>
</body>

</html>

效果演示：