jQuery：阻止含show类的折叠元素反复切换+添加过渡效果

问题需求 #

• 多个折叠元素始终保持一个处于展开状态：
  • 点击未展开元素：收起当前展开项，展开点击项
  • 点击已展开元素（含show类）：阻止其收起再展开的反复切换

原脚本问题分析 #

原脚本存在3处关键错误：

1. 选择器缺失前缀：$(this).find('collapse') 需改为.collapse（类选择器）
2. 语法错误：addClass(show) 需改为addClass('show')（类名需用字符串包裹）
3. 逻辑执行漏洞：上述错误导致点击已展开元素时，判断逻辑失效，出现反复切换

修正后的核心脚本 #

$('.li').click(function() {
    var current = $(this).find('.collapse');
    // 仅当当前元素未展开时执行切换逻辑
    if (!current.hasClass('show')) {
        $('.collapse').removeClass('show');
        current.addClass('show');
    }
});

添加过渡效果（纯CSS实现） #

无需依赖Bootstrap折叠组件，直接通过CSS过渡属性实现平滑展开/收起效果：

基础CSS样式 #

.collapse {
    max-height: 0;
    overflow: hidden;
    /* 定义过渡动画的属性、时长和曲线 */
    transition: max-height 0.3s ease-out;
}

.collapse.show {
    /* 设置足够大的值覆盖内容高度，避免截断 */
    max-height: 500px;
}

优化说明 #

• 使用max-height而非height：height: auto无法触发CSS过渡，max-height可模拟高度变化
• 可根据内容高度调整max-height数值，或结合JS动态计算内容高度，避免动画延迟
• 调整0.3s可修改动画快慢，ease-out可改为linear等其他过渡曲线

完整示例代码 #

<ul>
    <li class="li">
        标题1
        <div class="collapse">内容1：这里是折叠的内容区域</div>
    </li>
    <li class="li">
        标题2
        <div class="collapse">内容2：这里是折叠的内容区域</div>
    </li>
    <li class="li">
        标题3
        <div class="collapse show">内容3：默认展开的内容区域</div>
    </li>
</ul>

<style>
.li {
    cursor: pointer;
    margin: 10px 0;
    padding: 8px;
    border: 1px solid #eee;
}
.collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    margin-top: 8px;
    padding: 0 8px;
    background-color: #f8f9fa;
}
.collapse.show {
    max-height: 500px;
    padding: 8px;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.li').click(function() {
    var current = $(this).find('.collapse');
    if (!current.hasClass('show')) {
        $('.collapse').removeClass('show');
        current.addClass('show');
    }
});
</script>

内容的提问来源于stack exchange，提问作者vaemps