在单选按钮上使用 Bootstrap "Collapse" 到 show/hide 内容（无 JS）

Question

我正在使用 Bootstrap 3，我想创建一个单选按钮组，其中 shows/hides 内容基于所选的单选按钮。如果可能，我想使用所有 HTML 和数据属性。

下面是我的代码：

 <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>

这将 show/hode 目标 DIV 就好了，但我需要它来关闭 #Parent DIV.[=14 内的所有其他 DIVs =]

我知道您可以使用面板来完成此操作，但我从未见过使用单选按钮完成此操作，而且我非常接近。

有什么想法吗？

Answer 1

您可以组合使用面板和单选按钮。只需使用单选按钮作为开关，并用它来控制面板。

演示 http://www.bootply.com/Fdjc8kQiER#

源代码

<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>

唯一不完美的是，由于某些原因，当您 select 一个时，单选按钮不会更新。你再也看不到 selected 了。（不知道这是怎么发生的......有 bootstrap 的东西？如果你知道如何修复，请发表评论，这样我就可以编辑）

希望对您有所帮助

Answer 2

实际上，您可以使用 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>

这是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');
    }
})

通过这种方式，您将自己手动控制崩溃事件。希望这会有所帮助。

在单选按钮上使用 Bootstrap "Collapse" 到 show/hide 内容（无 JS）

Using Bootstrap "Collapse" on radio buttons to show/hide content (NO JS)

html

css

twitter-bootstrap

twitter-bootstrap-3