Question

在选择触发单选按钮的折叠面板时，是否存在纯HTML方法？我发现的每个示例都可以在再次单击相同的“打开”按钮时再次关闭打开的面板。

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

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

https://www.bootply.com/U8J7eJh3O6

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

1 个答案: