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

Question

是否有一种纯粹的 HTML 方法可以在选择触发折叠面板的单选按钮时保持折叠面板打开？我发现的每个示例都会在再次单击同一个打开按钮时再次关闭打开的面板。

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

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

https://www.bootply.com/U8J7eJh3O6

Answer 1

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

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 单选按钮切换折叠但在反复单击时保持打开状态

Bootstrap Radio Buttons Toggle Collapse but stay open when clicked repeatedly

html

collapse

bootstrap-4