Bootstrap 4.6 Collapse组件点击按钮无法切换展开/收起问题

问题原因 #

你的问题核心是ID命名不符合CSS选择器规范：Bootstrap 4的collapse组件在解析data-target属性时，会将属性值作为标准CSS选择器处理，而CSS规范明确要求ID选择器不能以数字作为首字符。你使用的30-50hp是数字开头的ID，因此data-target="#30-50hp"无法被正确识别匹配到对应元素。

你在控制台直接调用$("#30-50hp").collapse('show')能生效，是因为jQuery对数字开头的ID选择器做了额外兼容处理，能正确找到对应DOM元素，两种场景的解析逻辑不同才导致了表现差异。

解决方案 #

方案1（推荐）：调整ID命名规则

将ID修改为字母开头的格式，同步修改按钮的对应属性即可，修改示例如下：

<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#hp-30-50" aria-expanded="false" aria-controls="hp-30-50">
  30-50 HP
</button>
<div class="collapse" id="hp-30-50">
  <div class="card card-body">
    <h4 class="card-title">30-50 HP Card Title</h4>
    <ul>
      <li>List item 1</li>
    </ul>
  </div>
</div>

方案2：手动绑定JS事件控制

如果必须保留数字开头的ID，可放弃data属性触发方式，手动绑定按钮点击事件控制折叠状态：

$('.btn-secondary').on('click', function() {
  $("#30-50hp").collapse('toggle')
})

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