Html 单选按钮上的引导折叠

我在堆栈溢出上发现了这一点，我想实现的是，当用户单击单选按钮时，div保持在该状态

例如，如果我单击“是”，面板应可见，如果我再次单击“是”，则不能像现在那样关闭面板

有人知道怎么修吗

以下是源代码：

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

带单选按钮的引导折叠面板


显示面板：
对
不
标题
内容

您可以使用jQuery（将ID添加到输入中）执行此操作：

---

您可以删除

data toggle=“collapse”

和

data target=“#collapseOne”

向输入中添加值

value=“yes”

和

value=“no”

在输入更改事件中使用javascript隐藏/显示折叠

$('[name="collapseGroup"]').on('change', function() {  
  if($(this).val() === "yes") {
    $('#collapseOne').collapse('show');
  } else {
    $('#collapseOne').collapse('hide');
  }
});

---

您可以通过一些JQuery来实现这一点

HTML:

CSS:

---

这是一个活生生的例子

我认为更好、更简单的解决方案是只使用一个复选框

<input type="checkbox" id="check" />

if ($('#check').is(':checked')) {
$('p').slideDown(); 
 }
else {
$('p').slideUp(); 
}

如果（$（'#check'）。是（':checked'））{
$（'p'）.slideDown（）；
}
否则{
$（'p'）.slideUp（）；
}

仅用于引导和css的解决方案： 删除面板的id，并将唯一类添加到该类中。将

数据目标的
选择器更改为
.collapseOne:not（.in）
的“是”，将
数据目标的
选择器更改为
的
的“否”

带单选按钮的引导折叠面板


显示面板：
对
不
标题
内容

扩展
数据目标=“.collapseOne:not（.show）”
和
数据目标=“.collapseOne.show”
idea。。。如果有多个内容（每个单选按钮一个），并且只希望显示相应的div，那么可以使用from引导

您需要在两个折叠的项目之外都有一个
：

<div id="accordion">



然后您只需将
data parent=“#accordion”
添加到触发每次折叠的按钮中。
所以现在没有jQuery/javascript就可以做到这一点了？为什么要使用类而不是ID？在bootstrap4中使用
data target=“.collapseOne:not（.show）”
和
data target=“.collapseOne.show”
因为公开课是
show
这太棒了，谢谢<代码>#目标：不（.show）
适合我。
$(document).ready(function(){
    $('.yes').click(function(){
        $('p').slideDown(); //to show
    });
    $('.no').click(function(){
        $('p').slideUp();  //to hide
    });
});

p{
   background: white;
   border: 1px solid #c6c6c6;
   border-radius: 5px;
   padding: 15px;
   display: none;
 }

<input type="checkbox" id="check" />

if ($('#check').is(':checked')) {
$('p').slideDown(); 
 }
else {
$('p').slideUp(); 
}

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

<div id="accordion">