Свернуть, если ничего не проверено

Question

У меня есть несколько бутстрапов 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"> 
 
\t \t \t <a class="accordion-toggle" data-toggle="collapse" href="#announcements-1" aria-expanded="false" aria-controls="collapseOne"> 
 
\t \t \t <i class="icofont icofont-unique-idea"></i> Announcements </a> 
 
\t \t </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"> 
 
\t \t \t <a class="accordion-toggle" data-toggle="collapse" href="#announcements-2" aria-expanded="false" aria-controls="collapseOne"> 
 
\t \t \t <i class="icofont icofont-unique-idea"></i> Announcements 2 </a> 
 
\t \t </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>

Answer 1

Что вам нужно:

//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(); 
}); 

Простое объяснение:

1. Пройдите через каждый .collapse.
2. Проверьте кол-во :checked.
3. Если число больше 0, что означает, некоторый флажок:
   • Collapse аккордеон.
     Else
   • Ничего не делать.

См 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>

Answer 2

вы не можете просто использовать .collapse('hide'), как указано в документации. например, если вы хотите закрыть все аккорды на странице.

$.each($('.panel-collapse'), function() { 
     $(this).collapse('hide'); 
    }); 

Если вы хотите, чтобы дополнительный фильтр добавлял его в ваш селектор в jquery. поэтому вы можете отфильтровывать те, у которых есть флажки или что угодно. Ниже приведен пример работоспособный, где вы можете закрыть все accordians с одним нажатием кнопки

$(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>