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

来源：动视网责编：小采时间：2020-11-27 22:03:37

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

js实现按钮开关单机下拉菜单效果: 通过onclick单击事件，实现效果，代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>开关按钮设置</title> </head> <link rel=styl

推荐度：

点击下载本文 文档为doc格式

导读js实现按钮开关单机下拉菜单效果: 通过onclick单击事件，实现效果，代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>开关按钮设置</title> </head> <link rel=styl

通过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>

实现效果：