如何用Bootstrap按钮组实现互斥切换开关？按钮切换功能失效求助

我来帮你搞定这个按钮状态切换的问题！你的核心需求是让两个按钮保持互斥激活——点击一个时自动取消另一个的激活状态，同时控制对应折叠面板显示，又不想用radio按钮，这个思路完全可行，咱们只需要修正代码里的小问题就行。

原代码的问题点 #

你用$('#25kgbtn').button('active')来判断按钮激活状态是错误的，Bootstrap按钮组件并没有提供button('active')这个方法来获取状态。正确的做法是用jQuery的hasClass('active')来检查按钮是否带有active类（这是Bootstrap标记激活按钮的标准方式）。

修正后的完整代码 #

首先HTML部分保持你的结构即可（我调整了aria-controls属性匹配面板ID，更符合规范）：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <button class="btn btn-outline-primary" id="1kgbtn" type="button" data-toggle="collapse" data-target="#1kgpack" aria-expanded="false" aria-controls="1kgpack" aria-pressed="false" autocomplete="off">
    1kg package
  </button>
  <button class="btn btn-outline-primary" id="25kgbtn" type="button" data-toggle="collapse" data-target="#25kgpack" aria-expanded="false" aria-controls="25kgpack" aria-pressed="false" autocomplete="off">
    2.5kg package
  </button>
</div>

<!-- 对应折叠面板示例 -->
<div class="collapse" id="1kgpack">
  <div class="card card-body">
    1kg 包装的详情内容
  </div>
</div>
<div class="collapse" id="25kgpack">
  <div class="card card-body">
    2.5kg 包装的详情内容
  </div>
</div>

然后是修正并简化后的JavaScript代码：

// 1kg按钮点击事件处理
$('#1kgbtn').on('click', function () {
  // 隐藏对立的折叠面板
  $('#25kgpack').collapse('hide');
  // 检查对立按钮是否激活，若是则切换为未激活状态
  if ($('#25kgbtn').hasClass('active')) {
    $('#25kgbtn').button('toggle');
  }
});

// 2.5kg按钮点击事件处理
$('#25kgbtn').on('click', function () {
  // 隐藏对立的折叠面板
  $('#1kgpack').collapse('hide');
  // 检查对立按钮是否激活，若是则切换为未激活状态
  if ($('#1kgbtn').hasClass('active')) {
    $('#1kgbtn').button('toggle');
  }
});

代码逻辑说明 #

1. 状态判断修正：用hasClass('active')替代错误的button('active')，准确检测按钮的激活状态。
2. 互斥逻辑实现：点击当前按钮时，先隐藏对立的折叠面板，再检查对立按钮是否处于激活状态，若激活则切换它的状态（取消激活）。
3. 自动处理当前按钮状态：因为你用了btn-group-toggle和data-toggle="buttons"，点击按钮时Bootstrap会自动给当前按钮添加/移除active类，所以我们不需要手动切换当前按钮的状态，只需要处理对立按钮即可。

这样修改后，点击任意一个按钮，都会自动取消另一个按钮的激活状态，同时正确显示/隐藏对应的折叠面板，完全符合你的需求。

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