利用 JS 制作一个下拉列表
各位小伙伴
今天咱们来做一个下拉列表
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。
效果：
完整代码：
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;color: inherit;}
img{display: block;border:none;}
ol,ul{list-style:none;}
.clearfix:after {content: "";display: block;clear: both;}
.fl{ float: left;}
.fr{ float: right;}
.main{
width: 400px;
margin: 100px auto;
}
.main ul li a,.main ul li dl dt{
display: block;
width: 100%;
height: 40px;
background: #999;
font: 20px/40px "";
text-align: center;
color:#fff;
margin-bottom: 5px;
}
.main ul li dl dt{
background: #ccc;
}
.main ul li{
height: 40px;
margin-bottom: 5px;
overflow: hidden;
transition: 1s;
}