1
我創建了一個具有多行的引導程序摺疊手風琴，並且只允許在所有行之間一次打開一個選項卡。除Internet Explorer之外，所有瀏覽器中的開啓/關閉動畫均可順暢運行。在iE中，當打開一個選項卡時，其他選項卡有時會跳到下一個很尷尬的行，我不希望它這樣做。有沒有辦法來解決這個問題？Internet Explorer中的Bootstrap Accordion功能與其他瀏覽器的功能不同
這裏是我的codepen的鏈接。嘗試在Chrome和Internet Explorer中打開此鏈接，您將看到不同之處。 http://codepen.io/aahmed2/pen/yOQvVz
<div class="row">
<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
<a href="health-resources/ticks.html"><h4>Ticks</h4></a>
<a href="#"><h4>Bees and Wasps</h4></a>
<a href="#"><h4>Animal Bites</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="#"><h4>Pet Allergies</h4></a>
<a href="#"><h4>Toxic Plants</h4></a>
<a href="#"><h4>Pet and Wildlife Encounters</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="#"><h4>This is a Topic</h4></a>
<a href="#"><h4>Topic 2</h4></a>
<a href="#"><h4>Another Topic</h4></a>
</div>
</div>
</div>
<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading zoonotic" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<a href="#"><h4>Bacterial</h4></a>
<a href="#"><h4>Fungal</h4></a>
<a href="#"><h4>Parasitic</h4></a>
<a href="#"><h4>Prionotic</h4></a>
<a href="#"><h4>Rickettsial</h4></a>
<a href="#"><h4>Spirochetes</h4></a>
<a href="#"><h4>Viral</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading allergies" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<a href="#"><h4>Animal Allergies</h4></a>
<a href="#"><h4>Environmental Allergies</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading environment-health" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<a href="#"><h4>This is a Topic</h4></a>
<a href="#"><h4>Topic 2</h4></a>
<a href="#"><h4>Another Topic</h4></a>
</div>
</div>
</div>
</div>
</div>
而CSS
#accordion2 {
margin-top: -20px;
}
.panel-heading:focus {
outline: 0;
border: none;
}
.panel-group .panel {
border-width: 0;
padding: 0 !important;
border-radius: 0%;
}
.panel-group .panel-heading {
height: 100px;
text-align: center;
color: #fff;
padding-top: 2%;
border: 1px solid #fff;
border-radius: 0%;
background-color: rgba(0, 0, 0, 0.5);
}
.panel-group .panel-heading h2 {
color: #fff;
text-shadow: 2px 2px 3px #000000;
}
.panel-group .panel-heading a:active,
.panel-group .panel-heading a:visited,
.panel-group .panel-heading a:focus {
text-decoration: none !important;
}
.panel-group .panel-collapse {
background-color: #DDDDDD;
}
.panel-group .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
.panel-group > .panel {
margin-top: 5px;
}
IE的版本？您應該檢查jQuery版本和Bootstrap版本，並檢查他們的頁面以查看他們支持的瀏覽器。 –