HTML、CSS和jQuery：製作一個帶有動畫的折疊選單-js教程-PHP中文網

HTML、CSS和jQuery：製作一個帶有動畫的折疊選單

WBOY

發布： 2023-10-27 16:33:52

原創

1502 人瀏覽過

HTML、CSS和jQuery：製作一個帶有動畫的折疊選單

在Web開發中，折疊選單是一種常見的互動元素，可以節省頁面空間，同時也能提升使用者體驗。本文將介紹如何使用HTML、CSS和jQuery製作一個帶有動畫效果的折疊選單，並提供具體的程式碼範例。

HTML結構
首先，我們需要定義一個HTML結構來建立摺疊選單。以下是一個簡單的HTML結構範例：

<div class="menu-item">
  <h3 class="menu-title">菜单标题</h3>
  <div class="menu-content">
    <!-- 菜单内容 -->
  </div>
</div>

登入後複製

上述程式碼中，.menu-item是最外層的容器，.menu-title是選單的標題，.menu-content是選單的內容，初始狀態下是隱藏的。

CSS樣式
接下來，我們需要為折疊選單添加一些CSS樣式，來定義選單的外觀和動畫效果。以下是一個基本的CSS樣式範例：

.menu-item {
  margin-bottom: 10px;
}

.menu-title {
  cursor: pointer;
}

.menu-content {
  display: none;
}

.menu-content.show {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

登入後複製

在上述程式碼中，我們為.menu-item添加了一些底部間距，使選單之間有一定的間隔。為.menu-title設定了cursor: pointer，來改變滑鼠樣式，以表示選單可以點擊展開或折疊。 .menu-content的初始狀態是隱藏的，當新增.show類別名稱時，選單內容會以淡入的動畫效果顯示出來。

jQuery動畫效果
為了實現選單的展開和折疊功能，我們可以使用jQuery來新增動畫效果。以下是一個基本的jQuery程式碼範例：

$(document).ready(function() {
  $('.menu-title').click(function() {
    $(this).siblings('.menu-content').toggleClass('show');
  });
});

登入後複製

上述程式碼中，我們使用$(document).ready()來確保頁面載入完成後再執行程式碼。當點選.menu-title元素時，使用toggleClass()方法來切換.show類別名，從而實現選單內容的展開和折疊效果。

完整範例程式碼及效果預覽
以下是一個完整的HTML檔案程式碼範例，你可以將程式碼複製並貼上到一個HTML檔案中，並在瀏覽器中查看效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>折叠菜单</title>
  <style>
    .menu-item {
      margin-bottom: 10px;
    }

    .menu-title {
      cursor: pointer;
    }

    .menu-content {
      display: none;
    }

    .menu-content.show {
      display: block;
      animation: fadeIn 0.3s ease-in-out;
    }

    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.menu-title').click(function() {
        $(this).siblings('.menu-content').toggleClass('show');
      });
    });
  </script>
</head>
<body>
  <div class="menu-item">
    <h3 class="menu-title">菜单标题1</h3>
    <div class="menu-content">
      <p>菜单内容1</p>
    </div>
  </div>

  <div class="menu-item">
    <h3 class="menu-title">菜单标题2</h3>
    <div class="menu-content">
      <p>菜单内容2</p>
    </div>
  </div>

  <div class="menu-item">
    <h3 class="menu-title">菜单标题3</h3>
    <div class="menu-content">
      <p>菜单内容3</p>
    </div>
  </div>
</body>
</html>

登入後複製

你可以在瀏覽器中執行上述程式碼，點擊選單標題，即可看到選單內容以淡入的動畫效果展開和折疊。

綜上所述，透過使用HTML、CSS和jQuery，我們可以輕鬆地製作一個帶有動畫效果的折疊選單。希望本文的範例程式碼能對你有幫助，快去嘗試！

以上是HTML、CSS和jQuery：製作一個帶有動畫的折疊選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！