Accordion बूटस्ट्रैप 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> 

मुझे नहीं पता कि डेटा-पैरेंट हालांकि काम क्यों नहीं करता है। एक पतन div का विस्तार करें अन्य पतन बंद नहीं करता है। मैंने बूटस्ट्रैप के उदाहरण से कोड कॉपी करने की कोशिश की, लेकिन यह अभी भी काम नहीं करता है। इसके अलावा मेरे प्रोजेक्ट में, 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") 
    }) 
}) 

Answer 2

एक बार यह jsfiddle

के माध्यम से जाना और यहाँ एचटीएमएल कोड है,

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