手风琴在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的例子中复制代码,但它仍然无效.同样在我的项目中,我jquery.js之前也包括在内bootstrap.min.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")
    })
})