如何用jQuery实现Bootstrap折叠切换时的链接文本切换？

问题核心原因 #

你的代码存在两个关键问题：

• 事件绑定选择器错误：jQuery中绑定的是.toggle-text类，但实际按钮的类是more-toggler，导致点击事件根本没作用到按钮上。
• 直接绑定点击事件不够可靠：Bootstrap折叠组件有自身的状态切换逻辑，使用官方提供的折叠事件监听，能避免和组件内部行为冲突，实现更稳定的文本切换。

修复方案 #

方案一：修正选择器（快速修复） #

把jQuery里的选择器改成按钮实际的类more-toggler，同时保留原有切换逻辑：

$(document).ready(function() {
    // 初始化隐藏"less"文本
    $('.hidden').removeClass('hidden').hide();
    // 绑定按钮点击事件，修正选择器
    $('.more-toggler').click(function() {
        $(this).find('span').toggle();
    });
});

方案二：使用Bootstrap折叠事件（推荐） #

利用Bootstrap 5提供的show.bs.collapse和hide.bs.collapse事件，精准对应折叠的展开/收起状态，同时同步更新无障碍属性：

$(document).ready(function() {
    // 初始化隐藏"less"文本
    $('.hidden').removeClass('hidden').hide();
    
    // 监听折叠展开事件
    $('.more-collapse').on('show.bs.collapse', function() {
        const targetBtn = $(`[data-bs-target="#${this.id}"]`);
        targetBtn.find('span').toggle();
        targetBtn.attr('aria-expanded', 'true');
    });
    
    // 监听折叠收起事件
    $('.more-collapse').on('hide.bs.collapse', function() {
        const targetBtn = $(`[data-bs-target="#${this.id}"]`);
        targetBtn.find('span').toggle();
        targetBtn.attr('aria-expanded', 'false');
    });
});

可选优化：简化HTML结构 #

可以去掉hidden类，直接用行内样式控制初始隐藏，减少初始化代码：

<div class="collapse more-collapse" id="moreContent{sub_topic:entry_id}">
    {sub_topic:more_text}
</div>
<p>
    <a class="red more-toggler custom-toggler me-4" data-bs-toggle="collapse" data-bs-target="#moreContent{sub_topic:entry_id}" aria-controls="moreContent" aria-expanded="false" aria-label="Toggle more-content">
        Show <span>more</span><span style="display:none;">less</span> &#8250;
    </a>
</p>

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