jQuery中怎么實(shí)現(xiàn)toggle方法

發(fā)布時(shí)間：2020-09-28 15:34:39 來源：億速云閱讀：188 作者：小新欄目：web開發(fā)

小編給大家分享一下jQuery中怎么實(shí)現(xiàn)toggle方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

我們知道使用 jQuery 來實(shí)現(xiàn)上下移入移除，可以直接使用 slideUp() 和 slideDown() 方法。

slideUp()方法和slideDown()方法只會(huì)改變?cè)氐母叨?。如果一個(gè)元素的 display 屬性值為 “none”，當(dāng)調(diào)用 slideDown() 方法時(shí)，這個(gè)元素將由上至下延伸顯示。slideUp()方法正好相反，元素將由上到下縮短隱藏。

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <p class="container">
  <p class="left"></p>
 </p>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $('#toggle').click(function(){
    $('.left').slideToggle(300);
   });
  });
 </script>
</body>
</html>

那么，要實(shí)現(xiàn)左右的滑入滑出呢？

demo 如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>toggle-jquery1.9</title>
 <script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
 <style>
  p.container {
   height: 320px;
   border: 1px solid #ccc;
  }
  p.left {
   width: 200px;
   height: 300px;
   background-color: #36f;
  }
 </style>
</head>
<body>
 <p class="container">
  <p class="left"></p>
 </p>
 <button id="toggle">toggle</button>
 <script>
  $(document).ready(function(){
   $('#toggle').click(function(){
    $('.left').animate({width:'toggle'},350);
   });
  });
 </script>
</body>
</html>

看完了這篇文章，相信你對(duì)jQuery中怎么實(shí)現(xiàn)toggle方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

jQuery中怎么實(shí)現(xiàn)toggle方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽