[英]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.