原生JS实现点击下拉菜单

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

与悬停不同的是，悬停的操作都是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的问题，供读者参考~

原生JS实现点击下拉菜单相关推荐

点击下拉菜单以外区域，下拉菜单收起
点击下拉菜单以外区域,下拉菜单收起网页中下拉菜单随处可见,一般用到toggle()或slideToggle()事件:但下拉菜单出来后,一般要再次点击原来的按钮才能收起,所以做到下拉菜单以外点击收起, ...
js+css+html制作下拉菜单
js+css+html制作下拉菜单 1 案例需求 2 编写HTML结构代码 3 编写css样式 4 编写JavaScript部分 5 全部代码 1 案例需求使用JavaScript+css+html ...
python爬虫模拟点击下拉菜单和_python+selenium爬虫过程中的模拟点击问题
题目描述下拉菜单选项无法提取成列表以及不能够被点击,请帮忙分析看一下什么原因题目来源及自己的思路对于app移动掌上营业厅抓包后,PC端的爬虫过程. 第一步:进入首页,点击"更多&quo ...
figma制作点击下拉菜单
在原型设计时想要实现点击弹出下拉菜单,然后查阅网上的资料也很少.所以只能自己摸索. 完成后做一个记录,供浏览查看目标效果制作效果如下: 先制作一个卡片,将其转换为组件(在图层上显示为菱形) 然后在 ...
java用下拉框实现出生日期_纯JS实现出生日期[年月日]下拉菜单效果
在制作网页时,可能需要给用户提供注册帐号页面,用户注册设计很多信息,其中就有关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用J ...
vue.js bootstrap 下拉列表_Excel下拉菜单制作的小技巧
在工作中,常常需要对多行多列的数据设置下拉菜单,但在使用数据验证,设置下拉菜单时,序列来源是不能执行引用多行多列区域的,否则即会出现下图提示框,应该如何进行设置呢? 第一步:定义名称框鼠标依次点击公 ...
html5地区下拉菜单,JS特效：地区下拉菜单
可变的下拉菜单是网页中非常常见的一项功能,现在给大家做一个非常简单的实现,原理很简单,本质就是元素的显示与隐藏.代码如下大家试试. HTML 西安市铜川市宝鸡市未央区莲湖区新城区碑林区雁 ...
php表单设置出生日期,纯JS实现出生日期[年月日]下拉菜单效果_茜茜_前端开发者...
在制作网页时,可能需要给用户提供注册帐号页面,用户注册设计很多信息,其中就有关于出生日期的,出于用户体验,不想让用户手动输入,而HTML5的date,目前很多浏览器支持的并不是很好,所以就可以用 ...
html左侧导航栏点击下拉菜单,HTML+CSS实现下拉菜单
HTML+CSS实现简单下拉菜单 HTML+CSS实现简单的下拉列表 1.下拉列表实例代码如下: *{ margin:0; padding:0; text-decoration:none; list ...

原生JS实现点击下拉菜单

原生JS实现点击下拉菜单相关推荐

最新文章

热门文章