手风琴在Bootstrap 4崩溃中不起作用
https://fiddle.jshell.net/8v72rtxb/
我有以下代码。
<div class="menu-horizontal container">
<div class="row menu-container" id="menu">
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#studies-collapse" aria-expanded="false" aria-controls="collapseExample">
Studies
</a>
<div class="collapse" id="studies-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#research-collapse" aria-expanded="false" aria-controls="collapseExample">
Research
</a>
<div class="collapse" id="research-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
</div>
</div>
我不知道为什么data-parent不起作用。 展开一个折叠div不关闭另一个折叠。 我试图从bootstrap的例子中复制代码，但它仍然不起作用。 同样在我的项目中，我在bootstrap.min.js之前包含了jquery.js 。 我检查了一些其他问题，他们说bootstrap.min.js可能包含两次。 但是，情况应该如此吗？
谢谢阅读！
我想出了一个解决方法。 即使不使用data-parent属性。 https://fiddle.jshell.net/zyd1vL4o/
$(document).ready(function(){
$('.collapse').on('show.bs.collapse', function (e) {
$('.collapse').collapse("hide")
})
})
一旦经过这个jsfiddle
这里是html代码，
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Studies
</a>
</h5>
</div>
<div id="collapseOne" class="collapse " role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div id="studies-collapse">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="" class="menu-subitem">
Study Guides
</a>
<a href="" class="menu-subitem">
Counselling and Instructions
</a>
<a href="" class="menu-subitem">
Student Laboratory
</a>
<a href="" class="menu-subitem">
Student Exchange
</a>
</div>
<div class="col-md-3">
<a href="" class="menu-subitem">
Post‐graduate studies
</a>
<a href="" class="menu-subitem">
Theses
</a>
<a href="" class="menu-subitem">
Exams
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Research
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div id="research-collapse">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="" class="menu-subitem">
Study Guides
</a>
<a href="" class="menu-subitem">
Counselling and Instructions
</a>
<a href="" class="menu-subitem">
Student Laboratory
</a>
<a href="" class="menu-subitem">
Student Exchange
</a>
</div>
<div class="col-md-3">
<a href="" class="menu-subitem">
Post‐graduate studies
</a>
<a href="" class="menu-subitem">
Theses
</a>
<a href="" class="menu-subitem">
Exams
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
使用：
<div class="menu-horizontal container">
<div class="row menu-container" id="menu">
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed" data-target="#studies-collapse" href="#studies-collapse" aria-expanded="false" aria-controls="studies-collapse">
Studies
</a>
<div class="collapse" id="studies-collapse" data-parent="#menu">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed" data-target="#research-collapse" href="#research-collapse" aria-expanded="false" aria-controls="research-collapse">
Research
</a>
<div class="collapse" id="research-collapse" data-parent="#menu">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
</div>
</div>