关于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>


【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/xujintao/p/6864677.html