[英]Bootstrap collapse on radio button
我在 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>
Bootstrap 和 css only 解决方案:删除面板的 id 并改为向该类添加一个唯一的类。 将.collapseOne:not(.in)
的data-target
选择器更改为“Yes”,将.collapseOne:not.in
为“No”。
<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>
您可以删除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(向输入添加 ID)来做到这一点:
var yesRadio = $('#yes'),
noRadio = $('#no');
yesRadio.click(function () {
if($('#collapseOne').hasClass('in')) {
return false;
}
});
noRadio.click(function () {
if(!$('#collapseOne').hasClass('in')) {
return false;
}
});
你可以通过一些 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>
查询:
$(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;
}
我认为更好更简单的解决方案是只使用一个复选框
<input type="checkbox" id="check" />
if ($('#check').is(':checked')) {
$('p').slideDown();
}
else {
$('p').slideUp();
}
扩展data-target=".collapseOne:not(.show)"
和data-target=".collapseOne.show"
想法......如果你有不止一件事(每个单选按钮一个),并且你想要如果只显示相应的 div,则可以使用 Bootstrap 中的手风琴机制。
您需要在两个折叠项目之外都有一个<div>
:
<div id="accordion">
然后您只需将data-parent="#accordion"
到触发每次折叠的按钮。
您可以通过以下代码更改单选按钮更改的部分可见性,您甚至可以一次看到两个部分
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.