原生JS实现下拉列表

 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