Html 在单选按钮上使用 Bootstrap“折叠”来显示/隐藏内容（无 JS）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29151241/
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
Using Bootstrap "Collapse" on radio buttons to show/hide content (NO JS)
提问by DigitalMC
I am using Bootstrap 3 and I want to create a radio button group that shows/hides content based on the radio button selected. I want to use all HTML and data attributes if possible.
我正在使用 Bootstrap 3，我想创建一个单选按钮组，该组根据所选的单选按钮显示/隐藏内容。如果可能，我想使用所有 HTML 和数据属性。
Below is my code:
下面是我的代码：
<div id="parent">
<input type="radio" name="group1" value="1" data-parent="#parent" data-toggle="collapse" data-target="#div1" />
<input type="radio" name="group1" value="2" data-parent="#parent" data-toggle="collapse" data-target="#div2" />
<div class="panel-collapse collapse in" id="div1">Content</div>
<div class="panel-collapse collapse in" id="div2">Content</div>
</div>
This will show/hode the target DIV just fine, but I need it to close all other DIVs under inside the #Parent DIV.
这将很好地显示/隐藏目标 DIV，但我需要它来关闭 #Parent DIV 下的所有其他 DIV。
I know you can do this with panels but I've never seen it done with Radio buttons, and I'm so close.
我知道你可以用面板来做到这一点，但我从未见过用单选按钮来做到这一点，而且我非常接近。
Any ideas ?
有任何想法吗 ？
回答by JoJo
You could do a combination of panels and radio buttons. Just use the radio buttons as the toggle, and use it to control the panels.
您可以组合使用面板和单选按钮。只需使用单选按钮作为切换按钮，并使用它来控制面板。
demo http://www.bootply.com/Fdjc8kQiER#
演示 http://www.bootply.com/Fdjc8kQiER#
source code
源代码
<input type="radio" name="group1" value="1" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<input type="radio" name="group1" value="2" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<input type="radio" name="group1" value="3" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
1. What is HTML?
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
2. What is Bootstrap?
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
3. What is CSS?
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
</div>
the only thing that isn't perfect about this, is that for some reason the radio buttons don't update when you select one. you can't see the selected one anymore. (no idea how this happens... something with bootstrap? pls comment if you know how to fix, so i can edit)
唯一不完美的是，由于某种原因，当您选择一个单选按钮时，单选按钮不会更新。你再也看不到所选的了。（不知道这是怎么发生的......有引导程序的东西？如果你知道如何修复，请评论，所以我可以编辑）
hope it helps
希望能帮助到你
回答by DarioS
Actually you can use the stopPropagation() by jQuery with some adds to your HTML code.
实际上，您可以使用 jQuery 的 stopPropagation() 向您的 HTML 代码添加一些内容。
<div class="bs-example">
<input class="radio" id="collapseOne" type="radio" name="group1" value="1" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" checked>
<input class="radio" id="collapseTwo" type="radio" name="group1" value="2" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<input class="radio" id="collapseThree" type="radio" name="group1" value="3" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
1. What is HTML?
</h4>
</div>
<div id="collapseOnePanel" class="panel-collapse collapse in">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
2. What is Bootstrap?
</h4>
</div>
<div id="collapseTwoPanel" class="panel-collapse collapse">
<div class="panel-body">
<p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
3. What is CSS?
</h4>
</div>
<div id="collapseThreePanel" class="panel-collapse collapse">
<div class="panel-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
</div>
</div>
And this is the JS code.
这是JS代码。
$('#collapseOne,#collapseTwo,#collapseThree').on('click', function (e) {
e.stopPropagation();
if(this.id == 'collapseOne'){
$('#collapseTwoPanel').collapse('hide');
$('#collapseThreePanel').collapse('hide');
$('#collapseOnePanel').collapse('show');
}else if(this.id == 'collapseTwo'){
$('#collapseOnePanel').collapse('hide');
$('#collapseThreePanel').collapse('hide');
$('#collapseTwoPanel').collapse('show');
}else if(this.id == 'collapseThree'){
$('#collapseOnePanel').collapse('hide');
$('#collapseTwoPanel').collapse('hide');
$('#collapseThreePanel').collapse('show');
}
})
By this way you'll manually control the event of collapse doing it by yourself. Hope this will help.
通过这种方式，您将自己手动控制折叠事件。希望这会有所帮助。
