点击显示隐藏 · javascript

## 点击显示隐藏 ### 代码： ~~~ <style> #parent{ width: 100px; height: 100px; background: red; } .none{ display: none; } .show{ display: block; } </style> </head> <body> <div id="parent" class="none"> </div> <button id="toggle">点击</button> <script> var toggle =document.getElementById("toggle"); var parent =document.getElementById("parent"); toggle.onclick =()=>{ // if(parent.className =="none"){ // parent.className ="show" // }else{ // parent.className ="none" // } parent.classList.toggle("none"); } </script> </body> ~~~ 方法2： ~~~ <style> div{ width:200px; } div:first-child{ cursor: pointer; background:#ff2d51; height:50px; border:1px solid #333; } #content{ height:200px; border:1px solid #333; } .show{ display: none; } </style> </head> <body> <div id="title"> HTML </div> <div id="content"> HTML负责网页的结构 </div> <script> var title = document.getElementById("title"); var content = document.getElementById("content"); title.onclick = function(){ if(content.classList.contains("show")){ content.classList.remove("show") }else{ content.classList.add("show"); } // content.classList.toggle("show"); } </script> </body> ~~~