【发布时间】：2022-01-05 15:20:00
【问题描述】：
我有动态数据，点击一些按钮打开手风琴然后关闭它。问题是当手风琴打开时，其他手风琴应该关闭。就我而言，手风琴打开并仅在单击同一个按钮时单击。当当前打开时如何关闭手风琴。它从“form-group-1”开始。 检查 html 是这样的：
<form name="filter" id="filter" class="filter-desktop">
<div class="form-group">
<button type="button" class="filtre-collapse activite accordion collapsed" data-toggle="collapse" data-target="#activity" data-parent="#filter" aria-expanded="false" aria-controls="activity">
Secteurs <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="activity"></i>
</button>
<span class="selected-slide"></span>
<hr />
<div id="activity" class="collapse">
<fieldset>
<div class="checkbox-option">
<label class="option"><span>Achats</span><input id="input-activity" type="radio" name="activity[]" value="165" /> </label>
</div>
</fieldset>
</div>
</div>
<div class="form-group" id="form-group-1">
<button
type="button"
class="filtre-collapse speciality accordion collapsed"
data-toggle="collapse"
data-target="#speciality"
data-parent="#filter"
aria-expanded="false"
aria-controls="speciality"
disabled="disabled"
style="cursor: not-allowed; color: grey;"
>
Spécialités <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="speciality"></i>
</button>
<div id="speciality" class="collapse">
<fieldset></fieldset>
</div>
</div>
<div class="form-group" id="form-group-2">
<button type="button" class="filtre-collapse contrat accordion collapsed" data-toggle="collapse" data-target="#contrat" data-parent="#filter" aria-expanded="false" aria-controls="contrat">
Type de contrat <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="true" aria-controls="contrat"></i>
</button>
<div id="contrat" class="collapse">
<fieldset>
<div class="checkbox-option">
<label class="option"><span>CDD </span><input id="input-contrat" type="checkbox" name="contrat[]" value="8" /> </label>
</div>
<div class="checkbox-option">
<label class="option"><span>CDI </span><input id="input-contrat" type="checkbox" name="contrat[]" value="9" /> </label>
</div>
</fieldset>
</div>
</div>
<div class="form-group" id="form-group-3">
<button type="button" class="filtre-collapse region accordion collapsed" data-toggle="collapse" data-target="#region" data-parent="#filter" aria-expanded="false" aria-controls="region">
Régions <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="region"></i>
</button>
<div id="region" class="collapse">
<fieldset>
<div class="checkbox-option">
<label class="option"><span>Paris </span> <input id="input-region" type="checkbox" name="region[]" value="10" /> </label>
</div>
</fieldset>
</div>
</div>
<div class="form-group" id="form-group-4">
<button type="button" class="filtre-collapse departement accordion collapsed" data-toggle="collapse" data-target="#departement" data-parent="#filter" aria-expanded="false" aria-controls="departement">
Départements <i class="fa fa-chevron-right" aria-hidden="true" aria-expanded="false" aria-controls="departement"></i>
</button>
<div id="departement" class="collapse" style="">
<fieldset>
<div class="checkbox-option">
<label class="option"><span>Ain </span> <input id="input-departement" type="checkbox" name="departement[]" value="128" /> </label>
</div>
</fieldset>
</div>
</div>
</form>
<script>
jQuery("button.filtre-collapse").click(function () {
if (jQuery(this).hasClass("collapsed")) {
jQuery(this).find("i").removeClass();
jQuery(this).find("i").addClass("fa fa-chevron-down");
} else {
jQuery(this).find("i").removeClass();
jQuery(this).find("i").addClass("fa fa-chevron-right");
}
})
</script>
【问题讨论】：
标签： javascript html jquery events bootstrap-accordion