Bootstrap 5.3.3能否通过data-bs-toggle同时切换button与collapse？

问题原因 #

Bootstrap的data-bs-toggle属性不支持同时指定多个触发器值（比如button collapse），直接在属性中写多个值不会被框架识别，因此无法同时触发两种行为。

解决方案 #

通过自定义JavaScript监听按钮点击事件，手动触发折叠面板的切换，同时控制按钮自身的激活状态。

修正后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="collapse" href="#test" role="button" aria-expanded="false" aria-controls="test">collapse</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" data-bs-toggle="button" href="#test2" role="button" aria-expanded="false" aria-controls="test2">button</a>
    </li>
    <li class="nav-item">
      <a class="nav-link active" id="toggleBoth" href="#test3" role="button" aria-expanded="false" aria-controls="test3">both - working</a>
    </li>
  </ul>

  <div class="collapse multi-collapse" id="test">
    collapse
  </div>

  <div class="collapse multi-collapse" id="test3">
    both
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
<script>
  // 获取目标按钮和折叠面板元素
  const toggleBtn = document.getElementById('toggleBoth');
  const collapseEl = document.getElementById('test3');
  
  // 初始化折叠实例，关闭自动切换
  const collapse = new bootstrap.Collapse(collapseEl, {
    toggle: false
  });

  // 监听按钮点击事件
  toggleBtn.addEventListener('click', function(e) {
    e.preventDefault();
    // 切换按钮的激活状态类
    this.classList.toggle('active');
    // 切换折叠面板的显示/隐藏
    collapse.toggle();
    // 更新无障碍属性
    const isExpanded = this.getAttribute('aria-expanded') === 'true';
    this.setAttribute('aria-expanded', !isExpanded);
  });
</script>

核心操作说明 #

• 移除按钮上无效的多值data-bs-toggle，改为设置唯一ID用于JS选择
• 初始化Collapse实例时关闭自动切换，避免冲突
• 点击事件中：
  • 阻止默认链接跳转行为
  • 手动切换按钮的active类实现状态切换
  • 调用Collapse实例的toggle()方法控制折叠面板
  • 更新aria-expanded属性，保证无障碍访问合规

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