Akordeon nie działa w Bootstrap 4 Upadek

Question

https://fiddle.jshell.net/8v72rtxb/ Mam następujący kod.

<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> 

nie mam pojęcia, dlaczego dane-rodzic nie działa choć. Rozwiń jeden zwijacz div nie zamyka drugiego zwinięcia. Próbowałem skopiować kod z przykładu bootstrap, ale nadal nie działa. Również w moim projekcie dołączam jquery.js przed bootstrap.min.js. Sprawdziłem kilka innych pytań, powiedzieli, że bootstrap.min.js mogło zostać uwzględnione dwukrotnie. Ale czy tak powinno być?
Dzięki za przeczytanie!

Answer 1

Pomyślałem obejście tego. Nawet bez użycia atrybutu data-parent. https://fiddle.jshell.net/zyd1vL4o/

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

Answer 2

Po przejść przez ten jsfiddle

A oto kod 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>