twitter-bootstrap 单选按钮上的 Bootstrap 折叠
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37514934/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap collapse on radio button
提问by lewis4u
I have found this LINKon Stack overflow and what i want to achieve is that when user clicks on a radio button that div stays in that state.
我在 Stack Overflow 上找到了这个LINK，我想要实现的是，当用户单击一个单选按钮时，div 保持在该状态。
For example if i click on Yes the panel should be visible and if i click again on Yes it MUST not close the panel like it does now.
例如，如果我点击是，面板应该是可见的，如果我再次点击是，它不能像现在一样关闭面板。
Anyone knows how to fix it?
有谁知道如何修复它？
here is the source code:
这是源代码：
<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>
回答by francoisp
Bootstrap and css only solution:
Remove the panel's id and add a unique class to the class instead. Change the data-targetselector for .collapseOne:not(.in)on "Yes" and .collapseOne:not.infor "No".
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>
回答by tmg
You can remove data-toggle="collapse"and data-target="#collapseOne"
您可以删除data-toggle="collapse"和data-target="#collapseOne"
Add values to your inputs value="yes"and value="no"
添加值到您的输入value="yes"和value="no"
And hide/show collapse with javascript on input change event
并在输入更改事件上使用 javascript 隐藏/显示折叠
$('[name="collapseGroup"]').on('change', function() {
if($(this).val() === "yes") {
$('#collapseOne').collapse('show');
} else {
$('#collapseOne').collapse('hide');
}
});
回答by max
You can do it using jQuery (adding IDs to inputs):
您可以使用 jQuery（向输入添加 ID）来做到这一点：
var yesRadio = $('#yes'),
noRadio = $('#no');
yesRadio.click(function () {
if($('#collapseOne').hasClass('in')) {
return false;
}
});
noRadio.click(function () {
if(!$('#collapseOne').hasClass('in')) {
return false;
}
});
CODEPEN
代码笔
回答by QararUlHassan
You can do this by some JQuery
你可以通过一些 JQuery 来做到这一点
HTML:
HTML：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- radio button with calss -->
<input name="collapseGroup" type="radio" class="yes" data-toggle="collapse" data-target="#collapseOne"/> Yes
<input name="collapseGroup" type="radio" class="no" data-toggle="collapse" data-target="#collapseOne" checked/> No
<!-- content to show/hide -->
<p>
content
</p>
Jquery:
查询：
$(document).ready(function(){
$('.yes').click(function(){
$('p').slideDown(); //to show
});
$('.no').click(function(){
$('p').slideUp(); //to hide
});
});
CSS:
CSS：
p{
background: white;
border: 1px solid #c6c6c6;
border-radius: 5px;
padding: 15px;
display: none;
}
and here is the live example https://jsfiddle.net/54jxaoas/1/
回答by panatoni
I think better and easier solution is to use just a checkbox
我认为更好更简单的解决方案是只使用一个复选框
<input type="checkbox" id="check" />
if ($('#check').is(':checked')) {
$('p').slideDown();
}
else {
$('p').slideUp();
}
回答by Rusca8
Expanding on the data-target=".collapseOne:not(.show)"and data-target=".collapseOne.show"idea... if you have more than one thing (one for each radio button), and you want to have only the corresponding div showing, then you can use the accordion mechanicfrom Bootstrap.
扩展data-target=".collapseOne:not(.show)"和data-target=".collapseOne.show"想法...如果您有不止一个东西（每个单选按钮一个），并且您只想显示相应的 div，那么您可以使用Bootstrap 中的手风琴机制。
You need to have a <div>outside of both collapsed items:
您需要有<div>两个折叠项目的外部：
<div id="accordion">
And then you just add data-parent="#accordion"to the buttons that trigger each collapse.
然后您只需添加data-parent="#accordion"触发每次折叠的按钮即可。
