什麼是slideToggle()？

slideToggle()是jQuery提供的一個滑動效果方法，它可以在slideUp()和slideDown()之間自動切換。簡單説，就是點擊一下，元素會"滑動"地顯示或隱藏，而不是突然出現或消失。

💡 小知識：和普通的toggle()不同，slideToggle()是垂直方向的滑動效果，而toggle()是水平方向的切換。

語法

$(selector).slideToggle(speed, easing, callback)
  • speed：可選參數，規定滑動速度。可以是"slow"、"fast"或毫秒數（如1000）。
  • easing：可選參數，規定動畫速度曲線。默認是"swing"（開始和結束慢，中間快），也可以是"linear"（勻速）。
  • callback：可選參數，動畫完成後要執行的函數。

基本使用示例

示例1：最簡單的滑動切換

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>slideToggle基本用法</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <style>
    #content {
      background: #f0f0f0;
      padding: 20px;
      border: 1px solid #ccc;
      margin-top: 10px;
      display: none; /* 初始隱藏 */
    }
    button {
      padding: 8px 15px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button id="toggleBtn">點擊切換內容</button>
  <div id="content">
    <h3>滑動效果演示</h3>
    <p>這是通過jQuery slideToggle()方法控制的內容區域，點擊按鈕可以看到滑動效果哦！</p>
  </div>

  <script>
    $(document).ready(function() {
      $("#toggleBtn").click(function() {
        $("#content").slideToggle(500); // 500毫秒的滑動效果
      });
    });
  </script>
</body>
</html>

示例2：使用不同速度參數

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>slideToggle速度參數</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <style>
    #panel {
      background: #e0f7fa;
      padding: 20px;
      border: 1px solid #00bcd4;
      margin-top: 10px;
      display: none;
    }
  </style>
</head>
<body>
  <button id="slowBtn">慢速切換 (slow)</button>
  <button id="normalBtn">正常速度 (默認)</button>
  <button id="fastBtn">快速切換 (fast)</button>
  <div id="panel">
    <p>這是滑動面板內容</p>
  </div>

  <script>
    $(document).ready(function() {
      $("#slowBtn").click(function() {
        $("#panel").slideToggle("slow");
      });
      
      $("#normalBtn").click(function() {
        $("#panel").slideToggle();
      });
      
      $("#fastBtn").click(function() {
        $("#panel").slideToggle("fast");
      });
    });
  </script>
</body>
</html>

判斷元素展開/摺疊狀態

有時我們需要知道元素當前是展開還是摺疊狀態，比如根據狀態顯示不同的按鈕文字。以下是兩種實用方法：

方法1：使用回調函數判斷

$(document).ready(function() {
  $("#statusBtn").click(function() {
    $("#statusPanel").slideToggle(300, function() {
      if ($(this).is(":visible")) {
        $("#statusBtn").text("點擊收起");
        console.log("面板已展開");
      } else {
        $("#statusBtn").text("點擊展開");
        console.log("面板已摺疊");
      }
    });
  });
});

方法2：使用狀態類（推薦）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>判斷slideToggle狀態</title>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <style>
    #statusPanel {
      background: #e8f5e9;
      padding: 20px;
      border: 1px solid #4caf50;
      margin-top: 10px;
      display: none;
    }
    .opened {
      background: #c8e6c9;
    }
  </style>
</head>
<body>
  <button id="statusBtn">點擊展開</button>
  <div id="statusPanel">
    <p>這是可以展開/摺疊的面板</p>
  </div>

  <script>
    $(document).ready(function() {
      const statusClass = "opened";
      $("#statusBtn").click(function() {
        const $panel = $("#statusPanel");
        $panel.slideToggle(300, function() {
          if ($panel.is(":visible")) {
            $panel.addClass(statusClass);
            $("#statusBtn").text("點擊收起");
          } else {
            $panel.removeClass(statusClass);
            $("#statusBtn").text("點擊展開");
          }
        });
      });
    });
  </script>
</body>
</html>

實用技巧

  1. 初始隱藏：確保要滑動的元素初始是隱藏的，可以使用CSS display: none。
  2. 結合其他效果：可以和fadeIn/fadeOut等效果結合，實現更豐富的動畫。
  3. 多個元素：可以給多個元素綁定slideToggle，比如實現菜單的摺疊效果。
  4. 使用回調函數：在動畫完成後執行特定操作，比如更新UI或發送請求。

為什麼用slideToggle()而不是toggle()？

正如知識庫裏提到的：

"slideToggle()是垂直方向的滑動效果，而toggle()是水平方向的切換。"

所以，如果你想要一個自然的、像抽屜一樣上下滑動的效果，slideToggle()就是你的最佳選擇！