Bootstrap 单选按钮切换折叠但在重复单击时保持打开状态答案

【问题标题】：Bootstrap Radio Buttons Toggle Collapse but stay open when clicked repeatedlyBootstrap 单选按钮切换折叠但在重复单击时保持打开状态
【发布时间】：2019-06-26 03:40:51
【问题描述】：

是否有一种纯 HTML 方法可以在选择触发它们的单选按钮时保持折叠面板打开？当再次单击相同的打开按钮时，我找到的每个示例都让打开的面板再次关闭。

我希望在再次按下触发单选按钮时显示折叠面板。

打开的面板在多次单击时关闭的示例： https://codepen.io/martinkrulltott/pen/waRXgw

https://www.bootply.com/U8J7eJh3O6

【问题讨论】：

标签： html bootstrap-4 collapse

【解决方案1】：

你可以试试这样的。获得所需功能后，您可以使用引导组件设置样式。

HTML：

<form>
  Display Panel:
  <input type="radio" name="portion_selection" value="button_one" /> Yes
  <input type="radio" name="portion_selection" value="button_two" /> No
  <div id="portion_one" style="display:none">
    <div class="card">
      <div class="card-body">
        1. This is some text within a card body.
      </div>
    </div>
  </div>
  <div id="portion_two" style="display:none">
    <div class="card">
      <div class="card-body">
        2. This is some text within a card body.
      </div>
    </div>
  </div>
</form>

JS：

$("input[name='portion_selection']:radio")
    .change(function() {
      $("#portion_one").toggle($(this).val() == "button_one");
      $("#portion_two").toggle($(this).val() == "button_two"); });

示例代码笔：https://codepen.io/brooksrelyt/pen/GzWzOv

【讨论】：

这似乎破坏或忽略了 Bootstrap CSS。单选按钮恢复为标准外观（无聊）单选按钮，而不是站点 css 样式。这是不可避免的吗？无论如何，感谢您的正确答案。