アコーディオンはブートストラップ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が動作しないのか分かりません。展開する1つの折りたたみdivは、他の折り畳みを閉じません。私は、ブートストラップの例からコードをコピーしようとしましたが、それでも動作しません。 私のプロジェクトでは、bootstrap.min.jsの前にjquery.jsが含まれています。私は他のいくつかの質問をチェックした、彼らはbootstrap.min.jsが2回含まれているかもしれないと言った。しかし、それは事実でしょうか？
読んでいただきありがとうございます！

Answer 1

私はこれを回避する方法を考え出しました。 data-parent属性を使用しなくても https://fiddle.jshell.net/zyd1vL4o/

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

Answer 2

一度この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>