zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    第一次个人编程作业
    第一次结对编程作业
    第一次编程作业——地址簿
    我的第一次博客作业
    团队作业1
    作业一
    寒假作业四
    寒假作业三
    第二次寒假作业
    电梯
  • 原文地址:https://www.cnblogs.com/OFSHK/p/12765293.html
Copyright © 2011-2022 走看看