原生JS实现点击下拉菜单

最新推荐文章于 2024-05-06 21:09:29 发布

草原的扬鹅

最新推荐文章于 2024-05-06 21:09:29 发布

阅读量4.6k

点赞数 2

文章标签： css html5

本文链接：https://blog.csdn.net/waiwai1010/article/details/120315917

版权

接上一篇博文，这里实现点击下拉菜单。

与悬停不同的是，悬停的操作都是hover，直接写入CSS即可，这里需要将静态和动态样式分离，再JS添加点击事件，使用排他法绑定给目标元素特定的样式。

具体实现见下，其中需要注意的地方包括。

添加点击事件注意添加到父盒子section上，点击section，head和menu都会产生动态的样式变化（其实head可以添加点击事件来改变head的样式，但是head的点击事件无法改变menu的样式，所以这里统一选择绑定点击事件给父盒子section）。
其中section的点击事件需要被循环绑定。
head和menu的样式增加可以使用`element.className`，注意添加空格，以便识别样式字符串。

<!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;
        }
        
        a {
            text-decoration: none;
            color: black;
        }
        
        li {
            list-style: none;
        }
        
        li:hover {
            background-color: orange;
        }
        
        .container {
            margin: 50px auto;
            /* 里面的section作为item的排列方式是flex */
            display: flex;
            justify-content: space-evenly;
            width: 50%;
            height: 40px;
            background-color: skyblue;
        }
        
        section {
            float: left;
            /* 字体属性继承 */
            text-align: center;
            line-height: 40px;
            font-size: 16px;
        }
        
        .curhead {
            background-color: orange;
            color: white;
        }
        
        .menu {
            display: none;
        }
        
        .curmenu {
            display: block;
        }
    </style>
</head>

<body>
    <!-- 无论是悬停或者点击，tab（这里写作head）和list都是兄弟关系 被section小包裹 被container大包裹 -->
    <!-- 其中tab和list可以都写作li标签里，也可以将tab分开单独写 -->
    <div class="container">
        <section>
            <a href="#" class="head">大厂</a>
            <ul class="menu">
                <li>阿里巴巴</li>
                <li>腾讯</li>
                <li>字节跳动</li>
            </ul>
        </section>

        <section>
            <a href="#" class="head">中厂</a>
            <ul class="menu">
                <li>哔哩哔哩</li>
                <li>网易</li>
                <li>美团</li>
            </ul>
        </section>

        <section>
            <a href="#" class="head">小厂</a>
            <ul class="menu">
                <li>百度</li>
                <li>哈啰出行</li>
                <li>京东</li>
            </ul>
        </section>
    </div>
    <!-- 点击下拉菜单的动态和静态样式分离，用JS添加动态样式 -->
    <!-- 悬停下拉写入CSS的hover -->
    <script>
        var sections = document.querySelectorAll('section');
        var heads = document.querySelectorAll('.head');
        var menus = document.querySelectorAll('.menu');
        for (let i = 0; i < sections.length; i++) {
            // 这里原本写错是因为应该循环为section元素绑定点击事件 里面为head和menu写入两个排他事件
            sections[i].addEventListener('click', function() {
                heads.forEach(el => {
                    el.className = 'head';
                })
                heads[i].className += ' curhead';

                menus.forEach(el => {
                    el.className = 'menu';
                })
                menus[i].className += ' curmenu';
            });
        }
    </script>
</body>

</html>

最终实现如下点击和悬停效果。

关于排他：是指先将所有元素绑定为同样的样式。再将目标元素单独替换为目标样式，这样可以避免被点击过的元素依旧持有目标样式。

Tips：其实head和menu作为兄弟关系，可以都写在li中，设置一个属性"current"，鼠标移动则将current属性绑定给特定li元素，只是需要处理一下index的问题，供读者参考~

草原的扬鹅

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现点击下拉菜单

接上一篇博文，这里实现点击下拉菜单。与悬停不同的是，悬停的操作都是hover，直接写入CSS即可，这里需要将静态和动态样式分离，再JS添加点击事件，使用排他法绑定给目标元素特定的样式。具体实现见下，其中需要注意的地方包括。添加点击事件注意添加到父盒子section上，点击section，head和menu都会产生动态的样式变化（其实head可以添加点击事件来改变head的样式，但是head的点击事件无法改变menu的样式，所以这里统一选择绑定点击事件给父盒子section）。其中sectio
复制链接

扫一扫