原生JS实现点击下拉菜单

最新推荐文章于 2023-09-27 21:55:53 发布

草原的扬鹅

最新推荐文章于 2023-09-27 21:55:53 发布

阅读量4.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： 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: orang