单击某个手风琴时如何关闭其他手风琴，还如何在隐藏父级时隐藏说明？
[英]how do I close other accordions when one is clicked, Also How to hide description upon hiding the parent?
问题描述
I am trying to toggle between the accordions;
我正在尝试在手风琴之间切换； when one is clicked the other accordions should be closed but this is not working.Kindly help me. 单击一个手风琴后，其他手风琴应关闭，但此操作不起作用。请帮助我。 There are three types of creatures: Animals,Birds & insects and among them there are creatures like dog,cat,peacock etc. when I click on say peacock,it opens the data table as intended however when I click on the next creature say Kingfisher, it opens the table and still shows the old selected creature. 生物共有三种类型：动物，鸟类和昆虫，其中有诸如狗，猫，孔雀等生物。当我单击说孔雀时，它会按预期打开数据表，但是当我单击下一个生物时说翠鸟，它将打开表格并仍然显示旧的选定生物。 Description of all creatures is shown together. 所有生物的描述一起显示。 And If I close the Animals, then the description should hide as well. 如果我关闭了动物，那么说明也应该隐藏。
<!DOCTYPE html> <html> <head> <title>Accordians</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body> <style> .panel-heading.active { color: green; } #collapseOne2{ margin-left: 3%; } .panel-collapse{ margin-left: 3%; } .accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; } .active:after { content: "\\2212"; } .creatures{ padding: 7%; } .information{ padding: 3%; margin-right: 3%; } </style> <div class="container-fluid"> <div class="border" style="padding: 1%;margin: 1%;"> <div class="row"> <div class="col-12 col-sm-11 col-md-4"> <div class="border"> <span class="input-group-text"><h4><b>Life Forms</b></h4></span> <div class="creatures"> <div id="Animals" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingAnimals"> <h3 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Animals" href="#collapseAnimals" aria-expanded="true" aria-controls="collapseAnimals"> Animals </a> </h3> </div> </div> <div id="collapseAnimals" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAnimals"> <div id="Dogs" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingDogs"> <h4 class="panel-title"> <a accordion-id="#accordion" class="accordion collapsed" data-toggle="collapse" data-parent="#Dogs" href="#collapseDogs" aria-expanded="true" aria-controls="collapseDogs"> Dogs </a> </h4> </div> </div> <!--End of Dogs Panel Heading --> <div id="collapseDogs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingDogs"> <div id="AlaskanMalamute" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingAlaskanMalamute"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#AlaskanMalamute" href="#collapseAlaskanMalamute" aria-expanded="true" aria-controls="collapseAlaskanMalamute"> Alaskan Malamute </a> </h5> </div> </div> </div> <!-- End of Alaskan Malamute --> <div id="Coonhound" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCoonhound"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Coonhound" href="#collapseCoonhound" aria-expanded="true" aria-controls="collapseCoonhound"> American English Coonhound </a> </h5> </div> </div> </div> <!-- End of American English CoonHound --> </div> <!-- End of collapse Dogs --> </div> <!--End of Dogs --> <div id="Cats" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCats"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Dogs" href="#collapseCats" aria-expanded="true" aria-controls="collapseCats"> Cats </a> </h4> </div> </div> <!--End of Cats Panel Heading --> <div id="collapseCats" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCats"> <div id="Bengal" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingBengal"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Bengal" href="#collapseBengal" aria-expanded="true" aria-controls="collapseBengal"> Bengal </a> </h5> </div> </div> </div> <!-- End of Bengal --> <div id="Bombay" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingBombay"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Bombay" href="#collapseBombay" aria-expanded="true" aria-controls="collapseBombay"> Bombay </a> </h5> </div> </div> </div> <!-- End of Bombay --> </div> <!-- End of collapse Cats --> </div> <!--End of Cats --> <div id="Fishes" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFishes"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Fishes" href="#collapseFishes" aria-expanded="true" aria-controls="collapseFishes"> Fishes </a> </h4> </div> </div> <!--End of Fishes Panel Heading --> <div id="collapseFishes" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFishes"> <div id="CommonCarp" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCommonCarp"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#CommonCarp" href="#collapseCommonCarp" aria-expanded="true" aria-controls="collapseCommonCarp"> Common Carp </a> </h5> </div> </div> </div> <!-- End of Common Carp --> <div id="GoldFish" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingGoldFish"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#GoldFish" href="#collapseGoldFish" aria-expanded="true" aria-controls="collapseGoldFish"> Gold Fish </a> </h5> </div> </div> </div> <!-- End of Gold Fish --> </div> <!-- End of collapse Fishes --> </div> <!--End of Fishes --> </div> <!-- End of collapse Animals --> </div> <!-- End of #Animals--> <div id="Birds" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingBirds"> <h3 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Birds" href="#collapseBirds" aria-expanded="true" aria-controls="collapseBirds"> Birds </a> </h3> </div> </div> <div id="collapseBirds" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBirds"> <div id="Peacock" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingPeacock"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Peacock" href="#collapsePeacock" aria-expanded="true" aria-controls="collapsePeacock"> Peacock </a> </h4> </div> </div> <div id="collapsePeacock" class="panel-collapse collapse" role="tabpanel" aria-labelledby=" headingPeacock"> <div id="AsianPeackock" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingAsianPeacock"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#AsianPeackock" href="#collapseAsianPeacock" aria-expanded="true" aria-controls="collapseAsianPeacock"> Asian </a> </h5> </div> </div> </div> <div id="CongoPeacock" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCongoPeacock"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#CongoPeacock" href="#collapseCongoPeacock" aria-expanded="true" aria-controls="collapseCongoPeacock"> Congo </a> </h5> </div> </div> </div> <!--End of Congo Peacock --> </div> <!--End of Collapse Peacock --> </div> <!--End of Peacock --> <div id="Kingfisher" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingKingfisher"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Kingfisher" href="#collapseKingfisher" aria-expanded="true" aria-controls="collapseKingfisher"> Kingfisher </a> </h4> </div> </div> </div> <div id="collapseKingfisher" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingKingfisher"> <div id="Pied" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingPied"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Pied" href="#collapsePied" aria-expanded="true" aria-controls="collapsePied"> Pied </a> </h5> </div> </div> </div> <div id="Collared" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCollared"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Collared" href="#collapseCollared" aria-expanded="true" aria-controls="collapseCollared"> Collared </a> </h5> </div> </div> </div> </div> </div> <!--End of Collapse Birds --> </div> <!--End of Birds --> <div id="Insects" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingInsects"> <h3 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Insects" href="#collapseInsects" aria-expanded="true" aria-controls="collapseInsects"> Insects </a> </h3> </div> </div> <div id="collapseInsects" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingInsects"> <div id="HoneyBee" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingHoneyBee"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#HoneyBee" href="#collapseHoneyBee" aria-expanded="true" aria-controls="collapseHoneyBee"> HoneyBee </a> </h4> </div> </div> <div id="collapseHoneyBee" class="panel-collapse collapse" role="tabpanel" aria-labelledby=" headingHoneyBee"> <div id="AsianHoneyBee" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingAsianHoneyBee"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#AsianHoneyBee" href="#collapseAsianHoneyBee" aria-expanded="true" aria-controls="collapseAsianHoneyBee"> Asian HoneyBee </a> </h5> </div> </div> </div> <div id="RockHoneyBee" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingRockHoneyBee"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#RockHoneyBee" href="#collapseRockHoneyBee" aria-expanded="true" aria-controls="collapseRockHoneyBee"> Rock HoneyBee </a> </h5> </div> </div> </div> <!--End of Rock HoneyBee --> </div> <!--End of Collapse Honey Bee --> </div> <!--End of Peacock --> <div id="Mosquito" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingMosquito"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Mosquito" href="#collapseMosquito" aria-expanded="true" aria-controls="collapseMosquito"> Mosquito </a> </h4> </div> </div> </div> <div id="collapseMosquito" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingMosquito"> <div id="Anophelies" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingAnophelies"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Anophelies" href="#collapseAnophelies" aria-expanded="true" aria-controls="collapseAnophelies"> Anophelies </a> </h5> </div> </div> </div> <div id="Culex" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCulex"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Culex" href="#collapseCulex" aria-expanded="true" aria-controls="collapseCulex"> Culex </a> </h5> </div> </div> </div> </div> </div> <!--End of collapsesects --> </div> <!--End of Insects --> </div> </div> <!--End of Inner Border --> </div> <!--End of Column --> <div class="col-12 col-sm-12 col-md-8"> <div class="border"> <span class="input-group-text"><h4><b>Description</b></h4></span> <div class= information> <div id="collapseDogs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingDogs"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Trainability</th> <th>Life Expectancy</th> </tr> <tr> <td>Alaskan Malamute</td> <td>Loyal,Affectionate</td> <td>Independent</td> <td>10-14 years</td> </tr> <tr> <td>American English Coonhound</td> <td>Social,Sweet, Mellow</td> <td>Aggreable</td> <td>11-12 years</td> </tr> </table> </div> </div> <div id="collapseCats" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCats"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Trainability</th> <th>Life Expectancy</th> </tr> <tr> <td>Bengal Cat</td> <td>Loyal,Affectionate</td> <td>Independent</td> <td>10-14 years</td> </tr> <tr> <td>Bombay Cat</td> <td>Social,Sweet, Mellow</td> <td>Aggreable</td> <td>11-12 years</td> </tr> </table> </div> </div> <div id="collapseFishes" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFishes"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Trainability</th> <th>Life Expectancy</th> </tr> <tr> <td>CommonCarp</td> <td>Loyal,Affectionate</td> <td>Independent</td> <td>10-14 years</td> </tr> <tr> <td>GoldFish</td> <td>Social,Sweet, Mellow</td> <td>Aggreable</td> <td>11-12 years</td> </tr> </table> </div> </div> <div id="collapsePeacock" class="panel-collapse collapse" role="tabpanel" aria-labelledby=" headingPeacock"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>skin Tone</th> <th>Life Expectancy</th> </tr> <tr> <td>Asian Peacock</td> <td>Interactive</td> <td>Dark</td> <td>20-25 years</td> </tr> <tr> <td>Congo Peacock</td> <td>Shy</td> <td>Light</td> <td>10-15 years</td> </tr> </table> </div> </div> <div id="collapseKingfisher" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingKingfisher"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Hive Members</th> <th>Life Expectancy</th> </tr> <tr> <td>Pied KingFisher</td> <td>Aggressive</td> <td>200-350</td> <td>2-3 years</td> </tr> <tr> <td>Collared KingFisher</td> <td>Aggressive</td> <td>250-350</td> <td>3-4 years</td> </tr> </table> </div> </div> <div id="collapseHoneyBee" class="panel-collapse collapse" role="tabpanel" aria-labelledby=" headingHoneyBee"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Hive Members</th> <th>Life Expectancy</th> </tr> <tr> <td>Asian HoneyBee</td> <td>Aggressive</td> <td>200-350</td> <td>2-3 years</td> </tr> <tr> <td>Rock HoneyBee</td> <td>Aggressive</td> <td>250-350</td> <td>3-4 years</td> </tr> </table> </div> </div> <div id="collapseMosquito" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingMosquito"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Hive Members</th> <th>Life Expectancy</th> </tr> <tr> <td>Anopheles</td> <td>Aggressive</td> <td>200-350</td> <td>2-3 years</td> </tr> <tr> <td>Culex</td> <td>Aggressive</td> <td>250-350</td> <td>3-4 years</td> </tr> </table> </div> </div> </div> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ var acc = $(".accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } }); </script> </body> </html>
3 个解决方案
解决方案1
0 2018-10-16 12:18:53
i have updated your code you need to add data-parent="#panels" to collapse div and id="panel" to main panel-group div 我已经更新了您的代码，您需要添加data-parent="#panels" collapse div，将id="panel"到主panel-group div
<!DOCTYPE html> <html> <head> <title>Accordians</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script> </head> <body> <style> .panel-heading.active { color: green; } #collapseOne2{ margin-left: 3%; } .panel-collapse{ margin-left: 3%; } .accordion:after { content: '\\002B'; color: #777; font-weight: bold; float: right; } .active:after { content: "\\2212"; } .creatures{ padding: 7%; } .information{ padding: 3%; margin-right: 3%; } </style> <div class="container-fluid"> <div class="border" style="padding: 1%;margin: 1%;"> <div class="row"> <div class="col-12 col-sm-11 col-md-4"> <div class="panel-group" id="panels"> <div class="border"> <span class="input-group-text"><h4><b>Life Forms</b></h4></span> <div class="creatures"> <div id="Animals" role="tablist" aria-multiselectable="true" > <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingAnimals"> <h3 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Animals" href="#collapseAnimals" aria-expanded="true" aria-controls="collapseAnimals"> Animals </a> </h3> </div> </div> <div id="collapseAnimals" class="panel-collapse collapse" data-parent="#panels" role="tabpanel" aria-labelledby="headingAnimals"> <div id="Dogs" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingDogs"> <h4 class="panel-title"> <a accordion-id="#accordion" class="accordion collapsed" data-toggle="collapse" data-parent="#Dogs" href="#collapseDogs" aria-expanded="true" aria-controls="collapseDogs"> Dogs </a> </h4> </div> </div> <!--End of Dogs Panel Heading --> <div id="collapseDogs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingDogs"> <div id="AlaskanMalamute" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingAlaskanMalamute"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#AlaskanMalamute" href="#collapseAlaskanMalamute" aria-expanded="true" aria-controls="collapseAlaskanMalamute"> Alaskan Malamute </a> </h5> </div> </div> </div> <!-- End of Alaskan Malamute --> <div id="Coonhound" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCoonhound"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Coonhound" href="#collapseCoonhound" aria-expanded="true" aria-controls="collapseCoonhound"> American English Coonhound </a> </h5> </div> </div> </div> <!-- End of American English CoonHound --> </div> <!-- End of collapse Dogs --> </div> <!--End of Dogs --> <div id="Cats" role="tablist" aria-multiselectable="true" > <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCats"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Dogs" href="#collapseCats" aria-expanded="true" aria-controls="collapseCats"> Cats </a> </h4> </div> </div> <!--End of Cats Panel Heading --> <div id="collapseCats" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCats"> <div id="Bengal" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingBengal"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Bengal" href="#collapseBengal" aria-expanded="true" aria-controls="collapseBengal"> Bengal </a> </h5> </div> </div> </div> <!-- End of Bengal --> <div id="Bombay" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingBombay"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Bombay" href="#collapseBombay" aria-expanded="true" aria-controls="collapseBombay"> Bombay </a> </h5> </div> </div> </div> <!-- End of Bombay --> </div> <!-- End of collapse Cats --> </div> <!--End of Cats --> <div id="Fishes" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingFishes"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Fishes" href="#collapseFishes" aria-expanded="true" aria-controls="collapseFishes"> Fishes </a> </h4> </div> </div> <!--End of Fishes Panel Heading --> <div id="collapseFishes" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFishes"> <div id="CommonCarp" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCommonCarp"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#CommonCarp" href="#collapseCommonCarp" aria-expanded="true" aria-controls="collapseCommonCarp"> Common Carp </a> </h5> </div> </div> </div> <!-- End of Common Carp --> <div id="GoldFish" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingGoldFish"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#GoldFish" href="#collapseGoldFish" aria-expanded="true" aria-controls="collapseGoldFish"> Gold Fish </a> </h5> </div> </div> </div> <!-- End of Gold Fish --> </div> <!-- End of collapse Fishes --> </div> <!--End of Fishes --> </div> <!-- End of collapse Animals --> </div> <!-- End of #Animals--> <div id="Birds" role="tablist" aria-multiselectable="true" > <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingBirds"> <h3 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#panels" data-parent="#Birds" href="#collapseBirds" aria-expanded="true" aria-controls="collapseBirds"> Birds </a> </h3> </div> </div> <div id="collapseBirds" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingBirds"> <div id="Peacock" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingPeacock"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Peacock" href="#collapsePeacock" aria-expanded="true" aria-controls="collapsePeacock"> Peacock </a> </h4> </div> </div> <div id="collapsePeacock" class="panel-collapse collapse" role="tabpanel" aria-labelledby=" headingPeacock"> <div id="AsianPeackock" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingAsianPeacock"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#AsianPeackock" href="#collapseAsianPeacock" aria-expanded="true" aria-controls="collapseAsianPeacock"> Asian </a> </h5> </div> </div> </div> <div id="CongoPeacock" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCongoPeacock"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#CongoPeacock" href="#collapseCongoPeacock" aria-expanded="true" aria-controls="collapseCongoPeacock"> Congo </a> </h5> </div> </div> </div> <!--End of Congo Peacock --> </div> <!--End of Collapse Peacock --> </div> <!--End of Peacock --> <div id="Kingfisher" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingKingfisher"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Kingfisher" href="#collapseKingfisher" aria-expanded="true" aria-controls="collapseKingfisher"> Kingfisher </a> </h4> </div> </div> </div> <div id="collapseKingfisher" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingKingfisher"> <div id="Pied" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingPied"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Pied" href="#collapsePied" aria-expanded="true" aria-controls="collapsePied"> Pied </a> </h5> </div> </div> </div> <div id="Collared" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCollared"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Collared" href="#collapseCollared" aria-expanded="true" aria-controls="collapseCollared"> Collared </a> </h5> </div> </div> </div> </div> </div> <!--End of Collapse Birds --> </div> <!--End of Birds --> <div id="Insects" role="tablist" aria-multiselectable="true" > <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingInsects"> <h3 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Insects" href="#collapseInsects" aria-expanded="true" aria-controls="collapseInsects"> Insects </a> </h3> </div> </div> <div id="collapseInsects" class="panel-collapse collapse " data-parent="#panels" role="tabpanel" aria-labelledby="headingInsects"> <div id="HoneyBee" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingHoneyBee"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#HoneyBee" href="#collapseHoneyBee" aria-expanded="true" aria-controls="collapseHoneyBee"> HoneyBee </a> </h4> </div> </div> <div id="collapseHoneyBee" class="panel-collapse collapse" role="tabpanel" aria-labelledby=" headingHoneyBee"> <div id="AsianHoneyBee" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingAsianHoneyBee"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#AsianHoneyBee" href="#collapseAsianHoneyBee" aria-expanded="true" aria-controls="collapseAsianHoneyBee"> Asian HoneyBee </a> </h5> </div> </div> </div> <div id="RockHoneyBee" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingRockHoneyBee"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#RockHoneyBee" href="#collapseRockHoneyBee" aria-expanded="true" aria-controls="collapseRockHoneyBee"> Rock HoneyBee </a> </h5> </div> </div> </div> <!--End of Rock HoneyBee --> </div> <!--End of Collapse Honey Bee --> </div> <!--End of Peacock --> <div id="Mosquito" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingMosquito"> <h4 class="panel-title"> <a class="accordion collapsed" data-toggle="collapse" data-parent="#Mosquito" href="#collapseMosquito" aria-expanded="true" aria-controls="collapseMosquito"> Mosquito </a> </h4> </div> </div> </div> <div id="collapseMosquito" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingMosquito"> <div id="Anophelies" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingAnophelies"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Anophelies" href="#collapseAnophelies" aria-expanded="true" aria-controls="collapseAnophelies"> Anophelies </a> </h5> </div> </div> </div> <div id="Culex" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingCulex"> <h5 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#Culex" href="#collapseCulex" aria-expanded="true" aria-controls="collapseCulex"> Culex </a> </h5> </div> </div> </div> </div> </div> </div> <!--End of collapsesects --> </div> <!--End of Insects --> </div> </div> <!--End of Inner Border --> </div> <!--End of Column --> <div class="col-12 col-sm-12 col-md-8"> <div class="border"> <span class="input-group-text"><h4><b>Description</b></h4></span> <div class= information> <div id="collapseDogs" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingDogs"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Trainability</th> <th>Life Expectancy</th> </tr> <tr> <td>Alaskan Malamute</td> <td>Loyal,Affectionate</td> <td>Independent</td> <td>10-14 years</td> </tr> <tr> <td>American English Coonhound</td> <td>Social,Sweet, Mellow</td> <td>Aggreable</td> <td>11-12 years</td> </tr> </table> </div> </div> <div id="collapseCats" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingCats"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Trainability</th> <th>Life Expectancy</th> </tr> <tr> <td>Bengal Cat</td> <td>Loyal,Affectionate</td> <td>Independent</td> <td>10-14 years</td> </tr> <tr> <td>Bombay Cat</td> <td>Social,Sweet, Mellow</td> <td>Aggreable</td> <td>11-12 years</td> </tr> </table> </div> </div> <div id="collapseFishes" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFishes"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Trainability</th> <th>Life Expectancy</th> </tr> <tr> <td>CommonCarp</td> <td>Loyal,Affectionate</td> <td>Independent</td> <td>10-14 years</td> </tr> <tr> <td>GoldFish</td> <td>Social,Sweet, Mellow</td> <td>Aggreable</td> <td>11-12 years</td> </tr> </table> </div> </div> <div id="collapsePeacock" class="panel-collapse collapse" role="tabpanel" aria-labelledby=" headingPeacock"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>skin Tone</th> <th>Life Expectancy</th> </tr> <tr> <td>Asian Peacock</td> <td>Interactive</td> <td>Dark</td> <td>20-25 years</td> </tr> <tr> <td>Congo Peacock</td> <td>Shy</td> <td>Light</td> <td>10-15 years</td> </tr> </table> </div> </div> <div id="collapseKingfisher" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingKingfisher"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Hive Members</th> <th>Life Expectancy</th> </tr> <tr> <td>Pied KingFisher</td> <td>Aggressive</td> <td>200-350</td> <td>2-3 years</td> </tr> <tr> <td>Collared KingFisher</td> <td>Aggressive</td> <td>250-350</td> <td>3-4 years</td> </tr> </table> </div> </div> <div id="collapseHoneyBee" class="panel-collapse collapse" role="tabpanel" aria-labelledby=" headingHoneyBee"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Hive Members</th> <th>Life Expectancy</th> </tr> <tr> <td>Asian HoneyBee</td> <td>Aggressive</td> <td>200-350</td> <td>2-3 years</td> </tr> <tr> <td>Rock HoneyBee</td> <td>Aggressive</td> <td>250-350</td> <td>3-4 years</td> </tr> </table> </div> </div> <div id="collapseMosquito" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingMosquito"> <div class="table-responsive"> <table class="table table-bordered"> <tr> <th>Name</th> <th>Personality</th> <th>Hive Members</th> <th>Life Expectancy</th> </tr> <tr> <td>Anopheles</td> <td>Aggressive</td> <td>200-350</td> <td>2-3 years</td> </tr> <tr> <td>Culex</td> <td>Aggressive</td> <td>250-350</td> <td>3-4 years</td> </tr> </table> </div> </div> </div> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ var acc = $(".accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } }); </script> </body> </html>
PS copy this code and check on your local PS复制此代码，然后在本地检查
解决方案2
0 2018-10-16 12:22:06
take it as example
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
.bs-example{
margin: 20px;
background-color: rgba(215,215,215,1);
padding: 1em;
}
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <h4 class="panel-title">
Quesiton 1
</h4></a>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt ipsum eget nisl accumsan, eu cursus tellus bibendum. Nam et ipsum scelerisque dolor consequat tempor vel vel tortor.</p>
<p>Ut finibus facilisis lacus, sit amet porttitor enim mollis sed. Nunc orci magna, iaculis sit amet magna non, tincidunt varius sem.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <h4 class="panel-title">
Question Two
</h4></a>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt ipsum eget nisl accumsan, eu cursus tellus bibendum. Nam et ipsum scelerisque dolor consequat tempor vel vel tortor.</p>
<p>Ut finibus facilisis lacus, sit amet porttitor enim mollis sed. Nunc orci magna, iaculis sit amet magna non, tincidunt varius sem.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> <h4 class="panel-title">
Question Three
</h4></a>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tincidunt ipsum eget nisl accumsan, eu cursus tellus bibendum. Nam et ipsum scelerisque dolor consequat tempor vel vel tortor.</p>
<p>Ut finibus facilisis lacus, sit amet porttitor enim mollis sed. Nunc orci magna, iaculis sit amet magna non, tincidunt varius sem.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案3
0 2018-10-16 13:57:01
Please try below code 请尝试以下代码
<script>
$(document).ready(function(){
var acc = $(".accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
$(".panel-collapse").removeClass("show");
$(".panel-heading .panel-title .accordion").removeClass("active");
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如果一个手风琴点击，如何最小化其他手风琴 - How to minimize other accordions if one accordion clicked
当我打开一个手风琴时如何关闭多个部分中的所有其他手风琴？ - How to close all other accordions in multiple sections when I open one?
多个自举手风琴在单击一个手风琴时崩溃，其他折叠 - Multiple bootstrap accordions with collapse other when clicked on one accordion
单击 $(document) 时，如何使用 jquery 隐藏/关闭 div？ - How do I hide/close a div using jquery when $(document) is clicked?
单击相应菜单项时如何显示/隐藏内容的一部分，同时隐藏所有其他内容？ - How to show/hide a section of content when a corresponding menu item is clicked, while hiding all other content?
如果单击其父手风琴，如何折叠所有嵌套的手风琴？ - How to collapse all the nested Accordions if clicked on its parent Accordion?
单击其他父菜单项时如何关闭所有其他打开的子菜单？ - How to close all other open sub-menu when other parent menu item is clicked?
如何切换“活动”class，但再次单击时也将其隐藏 - how to toggle an 'active' class but also hide it when clicked again
单击范围时，Javascript自隐藏父div不隐藏 - Javascript self hide parent div not hiding when span clicked
如何在页面加载时隐藏手风琴？ - How to hide Accordions on page load?
相关标签