单选按钮上的 Bootstrap 折叠

Question

我在 Stack overflow 上找到了这个 链接，我想要实现的是，当用户单击单选按钮时，div 保持在该状态。

例如，如果我点击是，面板应该是可见的，如果我再次点击是，它不能像现在这样关闭面板。

任何人都知道如何解决它？

这是源代码：

 <h2>Bootstrap collapse panel with radio buttons</h2>

<br />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <span>Display panel: </span>

        <input name="collapseGroup" type="radio" data-toggle="collapse" data-target="#collapseOne"/> Yes

        <input name="collapseGroup" type="radio" data-toggle="collapse" data-target="#collapseOne" checked/> No

      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                    Header
                </h4>
          </div>
          <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
              <p>Content</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

原文由 lewis4u 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Bootstrap 和 css only 解决方案：删除面板的 id 并向该类添加一个唯一的类。将 data-target 选择器更改为 .collapseOne:not(.in) 为“是”， .collapseOne:not.in 为“否”。

 <h2>Bootstrap collapse panel with radio buttons</h2>

<br />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <span>Display panel: </span>

        <input name="collapseGroup" type="radio" data-toggle="collapse" data-target=".collapseOne:not(.in)"/> Yes

        <input name="collapseGroup" type="radio" data-toggle="collapse" data-target=".collapseOne.in" checked/> No

      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                    Header
                </h4>
          </div>
          <div class="collapseOne panel-collapse collapse">
            <div class="panel-body">
              <p>Content</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

原文由 francoisp 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以删除 data-toggle="collapse" 和 data-target="#collapseOne"

为您的输入添加值 value="yes" 和 value="no"

并在输入更改事件时使用 javascript 隐藏/显示折叠

$('[name="collapseGroup"]').on('change', function() {
  if($(this).val() === "yes") {
    $('#collapseOne').collapse('show');
  } else {
    $('#collapseOne').collapse('hide');
  }
});

代码笔

原文由 tmg 发布，翻译遵循 CC BY-SA 4.0 许可协议