如何使用原生js来实现下拉菜单

最新推荐文章于 2024-05-09 00:14:24 发布

识海．

最新推荐文章于 2024-05-09 00:14:24 发布

阅读量1.3k

点赞数 1

分类专栏：前端 JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_75115821/article/details/133363707

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

下拉菜单在页面中存在无非就是显示和隐藏的效果，鼠标滑动到标题显示下拉菜单，离开的使用关闭下拉菜单，但是在显示隐藏的时候会有一个小条件，就是控制鼠标移入移出事件的标签必须是包裹这个标题和下拉列表的，否则就会出现移入标题标签能够显示，但是移除标题标签就直接隐藏了，而我们要的效果是移入标题标签显示下拉菜单，而且移除标题标签，但是鼠标在下拉标签中，下拉菜单是显示的，所以在编写事件的时候，需要注意是由大盒子来控制里面的显示隐藏效果！！！

效果图如下：

参考代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #f4f4f4;
        }

        li {
            list-style: none;
        }

        .nav {
            display: inline-block;
            padding: 100px;
        }

        p {
            display: inline-block;
            font-size: 20px;
            cursor: pointer;
        }

        ul {
            display: none;
            padding: 10px 0;
            width: 100px;
            background-color: #fff;
        }

        li {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
        }

        li:hover,
        p:hover {
            color: #ff6700;
            background-color: #f4f4f4;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="person">
            <p>前端初学者</p>
            <ul>
                <li>消息通知</li>
                <li>账号修改</li>
                <li>退出登录</li>
            </ul>
        </div>
    </div>
    <script>
        const person = document.querySelector('.person') //大盒子容器
        const ul = document.querySelector('ul') //隐藏的下拉标签
        person.onmousemove = function () {
            ul.style.display = 'block'
        }
        person.onmouseout = function () {
            ul.style.display = 'none'
        }
    </script>
</body>

</html>

识海．

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
如何使用原生js来实现下拉菜单

下拉菜单在页面中存在无非就是显示和隐藏的效果，鼠标滑动到标题显示下拉菜单，离开的使用关闭下拉菜单，但是在显示隐藏的时候会有一个小条件，就是控制鼠标移入移出事件的标签必须是包裹这个标题和下拉列表的，否则就会出现移入标题标签能够显示，但是移除标题标签就直接隐藏了，而我们要的效果是移入标题标签显示下拉菜单，而且移除标题标签，但是鼠标在下拉标签中，下拉菜单是显示的，所以在编写事件的时候，需要注意是由大盒子来控制里面的显示隐藏效果！
复制链接

扫一扫