js实现按钮开关单机下拉菜单效果

2019-11-19 12:29:16

字体：大中小

来源：转载

供稿：网友

通过onclick单击事件，实现效果，代码如下：

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>开关按钮设置</title>  </head>  <link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" />  <style>    div{    width:120px;    margin: 0px auto;    border: 2px solid black;}    ul{      display: none;    }  </style>  <script>    window.onload=function(){      var odiv=document.getElementById("v");      var oli=odiv.getElementsByTagName("ul")[0];      var   onf=true        odiv.onclick=function(){          if (onf==true) {            oli.style.display='block';            onf=false          } else{            oli.style.display='none';            onf=true          }        }    }  </script>  <body>    <div id="v">      <h4>你好啊，小老弟</h2>    <ul>      <li>come</li>      <li>on</li>      <li>do</li>    </ul>    </div>       </body></html><br>

实现效果：