zoukankan      html  css  js  c++  java

  • 关于display的开关显示

    这是这样的一个非常常见的场景：
    有一个按钮，点击一下，展开内容，再点击一下，关闭内容
    我直接使用观察他的display值来判断，再设置display值：
    上代码
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>测试隐显按钮</title>
    6.     <script src="/Users/guabutian/Documents/Framework/JavaScript/jquery/jquery-3.1.1.min.js"></script>
    7.     <style type="text/css">
    8.     /*点击*/
    9.     #button {
    10.     width: 20px;
    11.     height: 20px;
    12.     background-color: red;
    13.     position: absolute;
    14.     float: left ;
    15.     }
    16.     
    17.     /*隐藏显示*/
    18.     #content {
    19.     border: 2px;
    20.     width: 400px;
    21.     height: 300px;
    22.     background-color: yellow;
    23.     position: absolute;
    24.     float: left;
    25.     top:10%;
    26.     }
    28.     </style>
    31. </head>
    32. <body>
    33. <div id="button">
    34.     
    35. </div> 
    36. <div id="content">
    37.     
    39. </div> 
    40. <script type="text/javascript">
    41.     $("#button").on('click',function(){
    42.         // alert("hello");
    43.         
    45.         if($("#content").css("display")=="none")
    46.         {
    47.             $("#content").css("display","block")
    48.             return;
    50.         }
    51.         if($("#content").css("display")=="block")
    52.         {
    53.             $("#content").css("display","none")
    54.             return;
    55.             
    56.         }
    58.         console.log($("#content").css("display"));
    60.     });
    61.     $("#content").on('click',function(){
    62.          
    65.     });
    67. </script>   
    68. </body>
    69. </html>
  • 相关阅读:
    成立移动互联网公司???
    C++的子对象
    单链表 操作的18种算法
    再论虚函数
    多线程(三)
    多线程(二)
    多线程(一)
    存储过程的参数
    git
    多态(三)
  • 原文地址：https://www.cnblogs.com/xujintao/p/6864677.html
Copyright © 2011-2022 走看看