我在页面上有几个bootstrap 4 collapse（http://v4-alpha.getbootstrap.com/components/collapse/）。每个复选框都崩溃了。我的目标是有一个按钮，允许用户关闭所有没有任何复选框的手风琴。
我所面临的挑战是：
//Collapse accordions that have check boxes
$('.collapse-only-checked').on('click', function(){
if ($('#accordion .collapse .item').is(':checked')) {
$('#accordion .collapse').collapse('hide');
event.preventDefault();
}
});
此功能关闭所有手风琴。我期待只关闭已检查任何输入（复选框）的手风琴。其他手风琴应该保持开放。
//Expand & Contract Accordions Based on Button Clicks
$(document).ready(function() {
//Expand All
$('.expand-all').on('click', function() {
$('#accordion .collapse').collapse('show');
event.preventDefault();
});
//Collapse All
$('.collapse-all').on('click', function() {
$('#accordion .collapse').collapse('hide');
event.preventDefault();
});
//Collapse accordions that have check boxes
$('.collapse-only-checked').on('click', function() {
if ($('#accordion .collapse .item').is(':checked')) {
$('#accordion .collapse').collapse('hide');
event.preventDefault();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<a class="btn btn-primary expand-all" href="#">Expand All</a> <a class="btn btn-primary collapse-all" href="#">Collapse All</a> <a class="btn btn-primary collapse-only-checked" href="#">Collapse Only That have Checked Inputs</a>
<br/>
<br/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="accordion">
<div class="card">
<!-- Accordion Title -->
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a class="accordion-toggle" data-toggle="collapse" href="#announcements-1" aria-expanded="false" aria-controls="collapseOne">
<i class="icofont icofont-unique-idea"></i> Announcements </a>
</h5>
</div>
<!-- //Accordion Title -->
<!-- Accordion Content -->
<div id="announcements-1" class="collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="true" style="">
<div class="card-block checkboxes">
<!-- Start Form Fields -->
<label class="control control--checkbox">Value 0
<input type="checkbox" class="item" value="Value 0">
<div class="control__indicator silver"></div>
</label>
<label class="control control--checkbox">Value 1
<input type="checkbox" data-type="Value 1" class="item" value="Value 1">
<div class="control__indicator public"></div>
</label>
<!-- End Form Fields -->
</div>
</div>
<!-- //Accordion Content -->
</div>
<div class="card">
<!-- Accordion Title -->
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a class="accordion-toggle" data-toggle="collapse" href="#announcements-2" aria-expanded="false" aria-controls="collapseOne">
<i class="icofont icofont-unique-idea"></i> Announcements 2 </a>
</h5>
</div>
<!-- //Accordion Title -->
<!-- Accordion Content -->
<div id="announcements-2" class="collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="true" style="">
<div class="card-block checkboxes">
<!-- Start Form Fields -->
<label class="control control--checkbox">Value 0
<input type="checkbox" class="item" value="Value 0">
<div class="control__indicator silver"></div>
</label>
<label class="control control--checkbox">Value 1
<input type="checkbox" data-type="Value 1" class="item" value="Value 1">
<div class="control__indicator public"></div>
</label>
<!-- End Form Fields -->
</div>
</div>
<!-- //Accordion Content -->
</div>
</div>
答案 0 :(得分：0)
您需要的是：
//Collapse accordions that have check boxes
$('.collapse-only-checked').on('click', function() {
$("#accordion .collapse").each(function () {
if ($(this).find('.item:checked').length > 0)
$(this).collapse('hide');
});
event.preventDefault();
});
简单的解释是：
.collapse。:checked复选框的数量。请参阅if条件：
//Expand & Contract Accordions Based on Button Clicks
$(document).ready(function() {
//Expand All
$('.expand-all').on('click', function() {
$('#accordion .collapse').collapse('show');
event.preventDefault();
});
//Collapse All
$('.collapse-all').on('click', function() {
$('#accordion .collapse').collapse('hide');
event.preventDefault();
});
//Collapse accordions that have check boxes
$('.collapse-only-checked').on('click', function() {
$("#accordion .collapse").each(function () {
if ($(this).find('.item:checked').length > 0)
$(this).collapse('hide');
});
event.preventDefault();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<a class="btn btn-primary expand-all" href="#">Expand All</a> <a class="btn btn-primary collapse-all" href="#">Collapse All</a> <a class="btn btn-primary collapse-only-checked" href="#">Collapse Only That have Checked Inputs</a>
<br/>
<br/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="accordion">
<div class="card">
<!-- Accordion Title -->
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a class="accordion-toggle" data-toggle="collapse" href="#announcements-1" aria-expanded="false" aria-controls="collapseOne">
<i class="icofont icofont-unique-idea"></i> Announcements </a>
</h5>
</div>
<!-- //Accordion Title -->
<!-- Accordion Content -->
<div id="announcements-1" class="collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="true" style="">
<div class="card-block checkboxes">
<!-- Start Form Fields -->
<label class="control control--checkbox">Value 0
<input type="checkbox" class="item" value="Value 0">
<div class="control__indicator silver"></div>
</label>
<label class="control control--checkbox">Value 1
<input type="checkbox" data-type="Value 1" class="item" value="Value 1">
<div class="control__indicator public"></div>
</label>
<!-- End Form Fields -->
</div>
</div>
<!-- //Accordion Content -->
</div>
<div class="card">
<!-- Accordion Title -->
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a class="accordion-toggle" data-toggle="collapse" href="#announcements-2" aria-expanded="false" aria-controls="collapseOne">
<i class="icofont icofont-unique-idea"></i> Announcements 2 </a>
</h5>
</div>
<!-- //Accordion Title -->
<!-- Accordion Content -->
<div id="announcements-2" class="collapse" role="tabpanel" aria-labelledby="headingOne" aria-expanded="true" style="">
<div class="card-block checkboxes">
<!-- Start Form Fields -->
<label class="control control--checkbox">Value 0
<input type="checkbox" class="item" value="Value 0">
<div class="control__indicator silver"></div>
</label>
<label class="control control--checkbox">Value 1
<input type="checkbox" data-type="Value 1" class="item" value="Value 1">
<div class="control__indicator public"></div>
</label>
<!-- End Form Fields -->
</div>
</div>
<!-- //Accordion Content -->
</div>
</div>
答案 1 :(得分：0)
您只能使用文档中提到的.collapse('hide')。例如，如果你想关闭页面上的所有手风琴。
$.each($('.panel-collapse'), function() {
$(this).collapse('hide');
});
如果你想进一步过滤，请在jquery中将它添加到你的选择器。所以你可以用复选框或任何你想要的东西过滤掉那些。下面是一个可运行的示例，您可以通过单击按钮关闭所有手风琴
$(document).ready(function() {
$('#closeAll').click(function(event) {
$.each($('.panel-collapse'), function() {
$(this).collapse('hide');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button class="btn btn-danger" id="closeAll">
Close All Accordions
</button>
<!--accordian one -->
<h3>
Accordion One
</h3>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<!-- accordian 2 -->
<h3>
Accordian Two
</h3>
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingOne2">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
Collapsible Group 2 Item #1
</a>
</h4>
</div>
<div id="collapseOne2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne2">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingTwo2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
Collapsible Group 2 Item #2
</a>
</h4>
</div>
<div id="collapseTwo2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo2">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading" role="tab" id="headingThree2">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
Collapsible Group 2 Item #3
</a>
</h4>
</div>
<div id="collapseThree2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree2">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<!-- accordian 2 -->
<h3>
Accordian Three
</h3>
<div class="panel-group" id="accordion3" role="tablist" aria-multiselectable="true">
<div class="panel panel-warning">
<div class="panel-heading" role="tab" id="headingOne3">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseOne3" aria-expanded="true" aria-controls="collapseOne3">
Collapsible Group 3 Item #1
</a>
</h4>
</div>
<div id="collapseOne3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne3">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading" role="tab" id="headingTwo3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo3" aria-expanded="false" aria-controls="collapseTwo3">
Collapsible Group 3 Item #2
</a>
</h4>
</div>
<div id="collapseTwo3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo3">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading" role="tab" id="headingThree3">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion3" href="#collapseThree3" aria-expanded="false" aria-controls="collapseThree3">
Collapsible Group 3 Item #3
</a>
</h4>
</div>
<div id="collapseThree3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree3">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>