原生JS实现下拉列表

原生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实现下拉列表


原生JS实现下拉列表-LMLPHP

 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

05-11 16:59