Question

我在堆栈溢出时发现了这个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>

Answer 1

Bootstrap和css only解决方案：删除面板的id并为该类添加一个唯一的类。将“{1}}的{{1}}选择器更改为”是“，将data-target更改为”否“。

.collapseOne:not(.in)

Answer 2

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

Answer 3

您可以删除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

Answer 4

扩展data-target=".collapseOne:not(.show)"和data-target=".collapseOne.show"的想法...如果您有一件以上的事情（每个单选按钮一个），并且只想显示相应的div，则可以使用Bootstrap中的accordion mechanic。

两个折叠项都需要有<div>：

<div id="accordion">

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

Answer 5

你可以通过一些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/

Answer 6

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

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

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

单选按钮上的Bootstrap折叠

6 个答案:

CODEPEN