接上一篇博文，这里实现点击下拉菜单。
与悬停不同的是，悬停的操作都是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的问题，供读者参考~
