Bootstrap在单选按钮上崩溃

lewis4u 发表于 Dev

lewis4u

我在堆栈溢出时发现了该链接，我想要实现的是当用户单击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>

弗朗索瓦

仅限Bootstrap和CSS的解决方案：删除面板的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>