jQuery Collapse - 简洁、高效的折叠插件

2026-01-14 18:43:14作者：晏闻田Solitary

是一个轻量级的jQuery插件，用于创建可折叠的HTML元素，如菜单、侧边栏、折叠面板等。它具有简洁易用的API，支持多种样式和交互效果，并且可以轻松地与其他jQuery插件集成。

功能特性

支持多级别的折叠项
可配置的样式和动画效果
良好的浏览器兼容性（包括IE8）
支持触摸设备
易于使用的API

使用方法

要使用jQuery Collapse，您需要先在页面中引入jQuery库和jQuery Collapse插件文件。然后，您可以选择通过数据属性或JavaScript API来初始化折叠项。例如，以下代码将创建一个带有两个折叠项的菜单：

<ul class="collapse">
    <li data-toggle="collapse" data-target="#menu1">Menu 1</li>
    <ul id="menu1" class="collapse">
        <li>Submenu 1.1</li>
        <li>Submenu 1.2</li>
    </ul>
    <li data-toggle="collapse" data-target="#menu2">Menu 2</li>
    <ul id="menu2" class="collapse">
        <li>Submenu 2.1</li>
        <li>Submenu 2.2</li>
    </ul>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jquery.collapse.js"></script>
<script>
    $(document).ready(function () {
        $('.collapse').collapse();
    });
</script>

自定义样式

jQuery Collapse允许您通过CSS样式来自定义折叠项的外观。默认情况下，折叠项将在鼠标悬停时显示阴影效果，并在展开和收起时添加滑动动画。您可以根据需要修改这些样式，以适应您的网站主题。

.collapse > li:hover {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.collapse > .in {
    display: block;
}

.collapse > .collapsing,
.collapse > .out {
    transition-timing-function: ease;
    transition-duration: 300ms;
    transition-property: height, margin-top, margin-bottom;
}