手风琴折叠菜单是 Web 应用程序中常用的交互式组件之一。在本文中，我们将使用 jQuery 实现一个漂亮而功能强大的手风琴折叠菜单。您将学习如何使用 CSS 和 JavaScript 结合 jQuery 动态地创建菜单，并让它具有展开和关闭的动画效果。
HTML 结构
我们将从 HTML 结构开始。该结构将包括一个 div 元素，其中包含多个 h3 元素和对应的 div 元素。每个 h3 元素都代表一个可点击的菜单项，而对应的 div 元素则包含菜单项下面的内容。
以下是 HTML 代码示例：
-- -------------------- ---- -------
---- ------------------
-------------
-----
------------------
------
-------------
-----
------------------
------
-------------
-----
------------------
------
------CSS 样式
接下来，我们需要定义一些 CSS 样式规则来控制菜单的外观和布局。我们将使用伪类选择器 :first-of-type 和 :last-of-type 来控制第一个和最后一个菜单项的样式。
以下是 CSS 代码示例：
-- -------------------- ---- -------
---------- -
------ -----
-
---------- -- -
------- --
-------- -----
---------- -----
----------------- --------
-------------- --- ----- -----
------- --------
-
---------- ---------------- -
----------- --- ----- -----
-
---------- --------------- -
-------------- -----
-
---------- --- -
-------- -----
-------- -----
------------ ------
-JavaScript 代码
现在，我们需要编写一些 JavaScript 代码来实现手风琴折叠菜单的动画效果。我们将使用 jQuery 的 slideUp() 和 slideDown() 方法来控制菜单项的展开和关闭。
以下是 JavaScript 代码示例：
$(document).ready(function() {
$('.accordion h3').click(function() {
$(this).next('div').slideToggle(500);
$(this).toggleClass('active');
$(this).siblings('h3').removeClass('active');
$(this).siblings('h3').next('div').slideUp(500);
});
});解释说明
让我们逐行解释 JavaScript 代码中发生的事情。
首先，我们使用 $() 函数在文档准备就绪时获取所有 h3 元素，并将点击事件处理程序附加到它们上面。当用户单击菜单项时，将触发此事件处理程序。
$(document).ready(function() {
$('.accordion h3').click(function() {
// ...
});
});然后，我们使用 slideToggle() 方法来展开或关闭与当前菜单项对应的 div 元素，并为当前菜单项添加一个名为 active 的 CSS 类。接着，我们使用 removeClass() 方法从其他菜单项中删除 active 类，并使用 slideUp() 方法关闭其他已展开的菜单项。
$(this).next('div').slideToggle(500);
$(this).toggleClass('active');
$(this).siblings('h3').removeClass('active');
$(this).siblings('h3').next('div').slideUp(500);最后，我们在 slideToggle() 和 slideUp() 方法中使用 500
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2591