부트 스트랩 붕괴를 사용하여 한 번에 여러 요소를 열지 않도록하려면 어떻게합니까?

Question

부트 스트랩 3을 사용 중이며 축소 기능을 사용하여 한 번에 하나의 요소 만 열 수 있도록하는 방법을 알 수 없습니다.

현재 연결된 이미지를 클릭하면 접힌 div가 예상대로 표시됩니다. 그러나 다른 연결된 이미지를 클릭하면 첫 번째 이미지를 닫지 않고도 해당 div가 나타납니다.

무엇이 여기에 있습니까?

<section id="employees" class="text-center"> 
     <ul id="employee_list" class="list-unstyled list-inline"> 

      <li class="employee_info"> 
       <a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse1"><img src="/media/cache/5a/a3/5aa3c3ab6d4af27b6efe20a8b3d9b119.jpg" width="175" height="175" class="img-circle" alt="Charles"></a> 
       <h2>Charles<br><small>Owner</small></h2> 
      </li> 

      <li class="employee_info"> 
       <a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse4"><img src="/media/cache/0a/a1/0aa14aaa5f95ed5eb86bb0a81fec5dd6.jpg" width="175" height="175" class="img-circle" alt="Kathleen"></a> 
       <h2>Kathleen<br><small>Design Consultant</small></h2> 
      </li> 

      <li class="employee_info"> 
       <a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse2"><img src="/media/cache/f1/ad/f1adc6187d0209e5ff14ed43118ca6b8.jpg" width="175" height="175" class="img-circle" alt="Carlos"></a> 
       <h2>Carlos<br><small>Project Manager</small></h2> 
      </li> 

      <li class="employee_info"> 
       <a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse3"><img src="/media/cache/88/16/88169162a66ed65beba79b5502a7955a.jpg" width="175" height="175" class="img-circle" alt="Phil"></a> 
       <h2>Phil<br><small>Project Manager</small></h2> 
      </li> 

     </ul> 

     <div id="collapse1" class="collapse"> 
      <p class="employee_bio">d convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero</p> 
     </div> 

     <div id="collapse4" class="collapse"> 
      <p class="employee_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p> 
     </div> 

     <div id="collapse2" class="collapse"> 
      <p class="employee_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p> 
     </div> 

     <div id="collapse3" class="collapse"> 
      <p class="employee_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p> 
     </div> 

     </section> 

Answer 1

부트 스트랩 당신이 상자 밖으로 찾는 것을 지원하지 않습니다

여기 내 HTML입니다. 당신이해야 할 일은 부트 스트랩이 유발 한 "show.bs.collapse"이벤트를 듣고 다른 것들을 붕괴시키는 것입니다.

$(".employee-collapse").on("show.bs.collapse", function(e) { 
    $(".employee-collapse").not(e.target).each(function(i, el){ 
    if ($(el).is(":visible")) 
     $(el).collapse('hide'); 
    }); 
}); 

당신은 그냥 더 구체적으로 요소에 .employee-collapse 클래스를 추가 한 것을 볼 수 있습니다.

<section id="employees" class="text-center"> 
     <ul id="employee_list" class="list-unstyled list-inline"> 

      <li class="employee_info"> 
       <a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse1"><img src="/media/cache/5a/a3/5aa3c3ab6d4af27b6efe20a8b3d9b119.jpg" width="175" height="175" class="img-circle" alt="Charles"></a> 
       <h2>Charles<br><small>Owner</small></h2> 
      </li> 

      <li class="employee_info"> 
       <a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse4"><img src="/media/cache/0a/a1/0aa14aaa5f95ed5eb86bb0a81fec5dd6.jpg" width="175" height="175" class="img-circle" alt="Kathleen"></a> 
       <h2>Kathleen<br><small>Design Consultant</small></h2> 
      </li> 

      <li class="employee_info"> 
       <a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse2"><img src="/media/cache/f1/ad/f1adc6187d0209e5ff14ed43118ca6b8.jpg" width="175" height="175" class="img-circle" alt="Carlos"></a> 
       <h2>Carlos<br><small>Project Manager</small></h2> 
      </li> 

      <li class="employee_info"> 
       <a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse3"><img src="/media/cache/88/16/88169162a66ed65beba79b5502a7955a.jpg" width="175" height="175" class="img-circle" alt="Phil"></a> 
       <h2>Phil<br><small>Project Manager</small></h2> 
      </li> 

     </ul> 

     <div id="collapse1" class="collapse employee-collapse"> 
      <p class="employee_bio"><strong>Charles</strong> d convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero</p> 
     </div> 

     <div id="collapse4" class="collapse employee-collapse"> 
      <p class="employee_bio"><strong>Kathleen</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p> 
     </div> 

     <div id="collapse2" class="collapse employee-collapse"> 
      <p class="employee_bio"><strong>Carlos</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p> 
     </div> 

     <div id="collapse3" class="collapse employee-collapse"> 
      <p class="employee_bio"><strong>Phil</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p> 
     </div> 

     </section>