jQuery中如何實作toggle方法

這次帶給大家jQuery如何實作toggle方法，使用jQuery中的toggle方法注意事項有哪些，以下就是實戰案例，一起來看一下。

我們知道使用 jQuery 來實作上下移入移除，可以直接使用 slideUp() 和 slideDown() 方法。

slideUp()方法和slideDown()方法只會改變元素的高度。如果一個元素的 display 屬性值為 “none”，當呼叫 slideDown() 方法時，這個元素會從上到下延伸顯示。 slideUp()方法正好相反，元素將由上到下縮短隱藏。

程式碼如下：

nbsp;html>


 <meta>
 <title>toggle-jquery1.9</title>
 <script></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>


 <p>
  </p><p></p>
 
 <button>toggle</button>
 <script>
  $(document).ready(function(){
   $(&#39;#toggle&#39;).click(function(){
    $(&#39;.left&#39;).slideToggle(300);
   });
  });
 </script>

#那麼，要實現左右的滑入滑出呢？

demo 如下：

nbsp;html>


 <meta>
 <title>toggle-jquery1.9</title>
 <script></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>


 <p>
  </p><p></p>
 
 <button>toggle</button>
 <script>
  $(document).ready(function(){
   $(&#39;#toggle&#39;).click(function(){
    $(&#39;.left&#39;).animate({width:&#39;toggle&#39;},350);
   });
  });
 </script>

#我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jquery中select元件的使用方法

如何實作jquery回車登入效果

jQuery自訂函數應用程式以及解析

滑鼠移出事件的案例以及詳解

以上是jQuery中如何實作toggle方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！