利用 JavaScript 制作一个下拉列表

各位小伙伴

今天咱们来做一个下拉列表

JS实现下拉列表

首先来给列表添加内容

这边设置了三个选项栏，里面的内容我都隐藏起来了~想看我隐藏的是什么内容吗？接着往下看吧~

给页面设置样式，中间的调试步骤就省略了。感兴趣的小伙伴，可以自己来调试一下，感受一下~

页面效果：

静态页面的效果咱们就做完了，现在利用 JavaScript 来给它添加动态的效果。

这段 JS 的代码的作用是：

创建一个数组 aA 获取类名为 .main 的 div标签下的 ul 标签下的 li 标签下的所有的 a 标签。创建一个 aLi 数组，获取类名为 .main 的 div 标签下的 ul 标签下的所有 li 标签（其中 .main 是 div 标签的类名，div  ul li 都是 HTML 中的常用标签这边不做解释哈~）

外层的 for 循环，给所有的 a 标签添加一个点击事件，当我们点击页面上的 a 标签（美女、男神、爱好）的选项时，弹出该列表选项下的内容，并且改变所选列表选项的背景色~

内层的 for 循环，当我们点击其他选项时，收起之前展开的列表~

效果：

再添加一个效果，当我的鼠标移入的时候，所处的选项变换背景颜色。

获取类名为 .main 的 div标签下的 ul 标签下的 li 标签下的所有的 dt 标签。然后利用 for 循环，当鼠标移入的时候，把所有的 dt 标签的背景色设置成#ccc，只把鼠标移入的这一个 dt 标签的背景色换成 #ff4500。

现在看起来是不是好看多了，现在我们的下拉菜单，只能实现点击展开的功能，并不能点击合并。

我们在代码中设置一个标记开关 onOff ，当 onOff = true 时，表示这个选项列表的状态是关闭的，当 onOff = false 时，表示这个选项列表的状态是打开的。

我们的代码逻辑是:

当我们点击这个列表选项的时候，如果 (if) 它的状态是 onOff = true，就给它设置关闭状态下的样式，并且使用 for 循环使所有的选项都是 onOff = true 状态，把当前的选项，设置成打开的样式，更新开关使 onOff = false，否则 (else) 给它设置成关闭状态的样式，并且让 onOff = true。

效果：

今天的分享就到这了

伙伴们再见了