我找到了这个LINK在 Stack overflow 上,我想要实现的是,当用户单击单选按钮时,div 保持在该状态。
例如,如果我单击"is",面板应该可见,如果我再次单击"is",它不得像现在这样关闭面板。
有人知道怎么解决吗?
这里是源代码:
<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 并向该类添加一个唯一的类。将 .collapseOne:not(.in)
的 data-target
选择器更改为"is",将 .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>
关于html - 单选按钮上的 Bootstrap 折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37514934/