Css 在单选按钮上使用引导“折叠”来显示/隐藏内容（无JS）

我正在使用Bootstrap 3，我想创建一个单选按钮组，根据所选单选按钮显示/隐藏内容。如果可能的话，我想使用所有的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>

这将很好地显示/隐藏目标DIV，但我需要它来关闭父DIV下的所有其他DIV

我知道你可以用面板来做这件事，但我从未见过用单选按钮来做这件事，我离你很近

---

有什么想法吗？

你可以把面板和单选按钮结合起来。 只需使用单选按钮作为切换，并使用它来控制面板

演示

源代码

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

唯一不完美的地方是，由于某些原因，单选按钮在您选择单选按钮时不会更新。您无法再看到所选的一个。不知道这是怎么发生的。。。有引导功能吗？请评论，如果你知道如何修复，所以我可以编辑

---

希望对您有所帮助

实际上，您可以通过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>

通过这种方式，您可以自己手动控制崩溃事件。

---

希望这会有帮助。

你是说像这样？我不确定，因为我没有太多的引导过期。只是即兴表演，这当然更近了！唯一的问题是，如果我反复点击一个单选按钮，内容就会改变，而单选按钮保持不变。嗯，我明白了。我认为如果不是不可能的话，没有javascript是很困难的。你能给我举一个例子，说明你所说的面板是如何工作的吗？再一次，我是一个自举的傻瓜；你考虑过标签吗？考虑到我问题中描述的问题，这很有效。为了多功能性，我最终还是用javascript解决了这个问题。不确定是否有一个更好的方式在引导本机上，因为标签太限制风格。好办法@Jojo。谢谢。这是一个使用引导和HTML的更新版本，没有自定义JS，点击按钮时会检查@JoJo问题是在输入中使用href，这会导致输入的单击事件中断。改用数据目标，它应该可以正常工作。这里的bootply：我的解决方案与@Blizwire的相同，但我使用的是与您相同的示例。当然，所有这些解决方案仍然有一个问题：我们仍然需要自定义javascript来防止再次单击单选按钮隐藏它应该显示的面板。@firesburnsump我知道，发问者要求一个没有JS的解决方案，但我已经将你的引导分叉，以便添加一些JS，以防止再次单击同一单选按钮时隐藏元素：@Blizwire如果你重新单击一个已选择的按钮，它将切换显示，否是隐藏显示，否显示。