js实现导航栏的下拉表单

最新推荐文章于 2024-06-30 14:04:39 发布

Sarnwan

最新推荐文章于 2024-06-30 14:04:39 发布

阅读量5.5k

点赞数 14

分类专栏： JavaScript 文章标签： js dom

本文链接： https://blog.csdn.net/xuehaocyuyan/article/details/118424850

版权

JavaScript 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

用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>

效果演示：