javascript - Accordion 在 Bootstrap 4 崩溃中不起作用

Question

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 可能被包含了两次。但事实应该如此吗？
感谢阅读!

Answer 1

我想出了一个解决方法。即使不使用 data-parent 属性。 https://fiddle.jshell.net/zyd1vL4o/

$(document).ready(function(){
    $('.collapse').on('show.bs.collapse', function (e) {
        $('.collapse').collapse("hide")
    })
})