JavaScript实现下拉列表效果_javascript技巧_

第一
     
         
a
         
b
         
c
     
     
第二
     
         
1
         
2
         
3
     
     
第二
     
         
4
         
5
         
6
     
     
         
第二
         
             
7
             
8
             
9
         
     

 .outer{             margin: 0 auto;             width: 500px;             height: 600px;             border: 1px solid red;         }         .outer .inner{             width: 500px;             border: 1px solid red;         }         .outer .inner ul{             list-style: none;             border: 1px solid fuchsia;         }         h2{             border: 1px solid blueviolet;             height: 30px;             display: flex;             justify-content: center;             cursor: pointer;             background-color: #74a400;             margin: 0;         }         ul{             display: none;                    }                     这里.ul是HTML里面没有的，要通过js来添加         .ul{             display: block;             background-color: cornflowerblue;             margin: 0;         }         ul li{             border: 1px solid cornflowerblue;             background-color: darkgray;             display: flex;             justify-content: center;             margin-left: -42px;             cursor: pointer;         }

window.onload = function () {         //    获取h2与ul             var h2 = document.getElementsByTagName("h2");             var ul = document.getElementsByTagName("ul");             //对所有的h2绑定一个点击事件             for (let i = 0; i