如何修改Bootstrap 4折叠按钮的文本，展开显示Close收起显示More

• HTML结构不符合Bootstrap折叠组件的要求：
  1. 要折叠的ul元素未添加collapse类，Bootstrap无法识别为可折叠元素
  2. 按钮的data-target属性值未加#前缀，无法正确关联到id为category1的ul元素
• JS逻辑时序错误：
  直接绑定click事件时，事件触发在Bootstrap完成折叠状态切换之前，判断的是切换前的类名，所以文本状态和折叠状态完全反向，首次点击也会因为初始状态不匹配出现文本不更新的问题。

首先替换原HTML的ul和按钮部分：

<!-- 加collapse类，初始展开就额外加show类，初始收起则去掉show类 -->
<ul class="category-menu collapse show" id="category1">
    <li>First Ul li1 </li>
    <li>First Ul li2 </li>
    <li>First Ul li3 </li>
    <li>First Ul li4</li>
</ul>

<!-- data-target加#前缀，初始展开时按钮文本为Close，初始收起则改为More -->
<button type="button" class="btn btn-link btn-block btn-filter-expand " data-toggle="collapse" data-target="#category1" aria-expanded="true" aria-controls="category1">
Close
</button>

然后替换JS代码，用Bootstrap原生的折叠完成事件来切换文本，完全避免时序问题：

// 列表完全收起时切换按钮文本为More
$('#category1').on('hidden.bs.collapse', function () {
  $('button.btn-filter-expand').text('More');
})
// 列表完全展开时切换按钮文本为Close
$('#category1').on('shown.bs.collapse', function () {
  $('button.btn-filter-expand').text('Close');
})

如果不想用事件监听，非要用click绑定的话，直接读取Bootstrap自动更新的aria-expanded属性判断即可：

$('button.btn-filter-expand').click(function () {
  const isExpanded = $(this).attr('aria-expanded') === 'true';
  $(this).text(isExpanded ? 'More' : 'Close');
})

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