单选按钮上的引导折叠答案

【问题标题】：Bootstrap collapse on radio button单选按钮上的引导折叠
【发布时间】：2016-09-27 15:36:11
【问题描述】：

我在 Stack Overflow 上找到了这个 LINK，我想要实现的是，当用户单击单选按钮时，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/javascript 的情况下做到这一点？

标签： html twitter-bootstrap

【解决方案1】：

您可以使用 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

【讨论】：

【解决方案2】：

您可以删除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');
  }
});

Codepen

【讨论】：

【解决方案3】：

你可以通过一些 JQuery 来做到这一点

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：

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

这是https://jsfiddle.net/54jxaoas/1/的实时示例

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

仅引导和 css 解决方案：删除面板的 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>

【讨论】：

为什么是类而不是 ID？
在 bootstrap4 中使用 data-target=".collapseOne:not(.show)" 和 data-target=".collapseOne.show" 因为开放类是 show
这太棒了，谢谢！ #target:not(.show) 为我工作。

【解决方案6】：

扩展data-target=".collapseOne:not(.show)" 和data-target=".collapseOne.show" 的想法...如果您有多个东西（每个单选按钮一个），并且您只想显示相应的 div，那么您可以使用@987654321 @来自 Bootstrap。

您需要在两个折叠项之外都有一个<div>：

<div id="accordion">

然后您只需将data-parent="#accordion" 添加到触发每次折叠的按钮即可。

【讨论】：

【解决方案7】：

您可以通过以下代码更改单选按钮更改部分的可见性，您甚至可以一次显示两个部分

<div class="form-row">
<div class="form-group col-md-6">
    <label class="small mb-1" for="inputFirstName">Category Repeat</label>
    <input name="collapseGroup" type="radio" data-toggle="collapse" value="0" data-target="#accordion:not(.show),#accordiof.show"/> Yearly
    <input name="collapseGroup" type="radio" data-toggle="collapse" value="1" data-target="#accordion.show,#accordiof:not(.show)" checked/> Weekly
    <div class="panel-group panel-collapse collapse" id="accordion">
        <input type="date" name="catorder1" id="catorder1" placeholder="catorder1"
               class="form-control"/>
    </div>
    <div class="panel-group panel-collapse collapse" id="accordiof">
        <input type="number" name="catorder" id="catorder" placeholder="catorder"
               class="form-control"/>
    </div>
</div>

【讨论】：