• 关于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>
  • 相关阅读:
    鼠标移入图片放大效果
    搜索框
    将下拉菜单放入input框中
    轮播图2
    V-demo item.vue
    v-demo1 List.vue
    v-demo1 add.vue
    v-demo1 app.vue
    3D轮播图
    封装代码
  • 原文地址：https://www.cnblogs.com/xujintao/p/6864677.html
Copyright © 2020-2023  润新知