1 <div class="list">
2 <ul>
3 <li>
4 <a href="#">Web部</a>
5 <dl>
6 <dt>A</dt>
7 <dt>B</dt>
8 <dt>C</dt>
9 </dl>
10 </li>
11 <li>
12 <a href="#">人事部</a>
13 <dl>
14 <dt>A</dt>
15 <dt>B</dt>
16 <dt>C</dt>
17 </dl>
18 </li>
19 <li>
20 <a href="#">开发部</a>
21 <dl>
22 <dt>A</dt>
23 <dt>B</dt>
24 <dt>C</dt>
25 </dl>
26 </li>
27 </ul>
28 </div>
原生JS实现下拉列表
1 <script type="text/javascript">
2 var Ali = document.getElementsByTagName('li');
3 for (var i = 0; i < Ali.length; i++) {
4 Ali[i].index = i;
5 Ali[i].isClose = true;
6 // 标记该列表项是否被收回
7 Ali[i].onclick = function() {
8 if (this.isClose) {//如果是收回状态就让它弹出
9 for (var j = 0; j < Ali.length; j++) {
10 Ali[j].style.height = "40px";
11 }//除选中列表项其他列表项收回
12 Ali[this.index].style.height = "164px";
13 this.isClose = false;
14 }else{//如果是弹出状态就让它收回
15 Ali[this.index].style.height = "40px";
16 this.isClose = true;
17 }
18 }
19 }
20 </script>
致谢:https://baijiahao.baidu.com/s?id=1594381997913090857&wfr=spider&for=pc