Follow Fang!: 利用jQuery 顯示或隱藏欄位

2013/10/28

利用jQuery 顯示或隱藏欄位

如何在點擊時能夠顯示或隱藏，我的想法很簡單，當點即時就隱藏欄位就好了，當隱藏之後被點擊就能顯示

這意謂著，我只要知道物件當前是處於隱藏或顯示的狀態就好了
要知道物件狀態，可以透過『is()』取得

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
   <script type="text/javascript">
    $(function () {
     $('.bar').click(function() {

      var hidden = $('.bar').children().is(":visible");
      
      if(hidden) 
       $('.bar').children().hide(); 
      else 
       $('.bar').children().show();
      
     });
    });
   </script>
   <style type="text/css">
   .bar{
    width: 300px;
    height: 50px;
    background-color: #758FEA;
   }
   </style>
 </head>
 <body>
  <div class="bar">
   bar
   <div>
    test
   </div>
  </div>
 </body>
</html>

尚未點擊前，test文字還在

點擊後，bar的子區塊已經被隱藏了

參考資料：
http://api.jquery.com/children/
http://api.jquery.com/is/