点击显示隐藏区域. · javascript

### 代码： ~~~ <style> *{margin: 0;padding: 0} li{ position: relative; width: 100px; height: 50px; list-style: none; text-align: center; line-height: 50px; } #hide{ position: relative; margin-left: 34px; border: 1px solid #333; width: 80px; text-align: center; } #hide a{ line-height: 25px; display: block; } li::after{ content: ""; border: 5px solid transparent; border-top-color: #000; position: absolute; top: 23px; left: 77px; } #hide::after{ content: ""; border: 5px solid transparent; border-bottom-color: rgb(179, 175, 175); position: absolute; top: -11px; left: 40px; } .none{ display: none; } </style> </head> <body> <ul> <li id="li">设置</li> <div class="none" id="hide"> <a href="">搜索设置</a> <a href="">搜索设置</a> <a href="">搜索设置</a> <a href="">搜索设置</a> </div> </ul> <script> var li =document.getElementById("li"); var hide=document.getElementById("hide"); li.onclick =()=>{ console.log(1); // if(parent.className =="none"){ // parent.className ="show" // }else{ // parent.className ="none" // } hide.classList.toggle("none"); } </script> </body> ~~~