js-菜单栏更多选项的显示隐藏操作-if

html效果：

点击更多就会有下拉菜单，再点击一下就没有了。

也就是说，

点击的时候，

div显示，则隐藏；

div隐藏，则显示。

引入js的if

html代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #div1 {
 8             width: 100px;
 9             height: 200px;
10             background: aquamarine;
11             display: none; /*一开始隐藏*/
12         }
13     </style>
14 
15     <script>
16         function f() {
17             var oL = document.getElementById('div1');
18             if (oL.style.display == 'block')
19                 oL.style.display = 'none';
20             else
21                 oL.style.display = 'block';
22         }
23     </script>
24 
25 </head>
26 <body>
27 <input type="button" value="更多（显示隐藏）" onclick="f()"/>
28 <!--记住这边别漏了，需要操作谁就需要调用一下-->
29 <div id="div1">
30 </div>
31 </body>
32 </html>

View Code