Бутстрап Аккордеон не рушится?

Question

У меня возникли проблемы с саундтреком. Я бы хотел, чтобы аккордеон открыл конкретный раздел, а затем закрыл все остальные разделы, чтобы оставить фокус только когда-либо на одном аккордеоне. У меня есть вложенный аккордеон, который, как я думаю, вызывает некоторые проблемы.

HTML

<div class="panel panel-group" id="accordion"> 
      <div class="panel panel-default"> 
       <div class="brown panel-heading"> 
        <h4 class="panel-title"> 
         <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_1"> 
          Accordion #1 
         </a> 
        </h4> 
       </div> 
       <div id="col_1" class="panel-collapse collapse in"> 
        <div class="panel-body"> 
         <div class="panel panel-default"> 
          <div class="pink panel-heading"> 
           <h4 class="panel-title" style="font-size: 14px;"> 
            <a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_2" href="#col_2"> 
             Accordion #sub1 
            </a> 
           </h4> 
          </div> 
          <div id="col_2" class="panel-collapse collapse"> 
           <div class="panel-body"> 
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
           </div> 
          </div> 
         </div> 
         <div class="panel panel-default"> 
          <div class="pink panel-heading"> 
           <h4 class="panel-title" style="font-size: 14px;"> 
            <a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_3" href="#col_3"> 
             Accordion #sub2 
            </a> 
           </h4> 
          </div> 
          <div id="col_3" class="panel-collapse collapse"> 
           <div class="panel-body"> 
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
           </div> 
          </div> 
         </div> 
         <div class="panel panel-default"> 
          <div class="pink panel-heading"> 
           <h4 class="panel-title" style="font-size: 14px;"> 
            <a class="accordion-toggle2" data-toggle="collapse" data-parent="#col_4" href="#col_4"> 
             Accordion #sub3 
            </a> 
           </h4> 
          </div> 
          <div id="col_4" class="panel-collapse collapse"> 
           <div class="panel-body"> 
            <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="brown panel-heading"> 
         <h4 class="panel-title"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_7"> 
           Accordion #2 
          </a> 
         </h4> 
        </div> 
        <div id="col_7" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
         </div> 
        </div> 
       </div> 
       <div class="panel panel-default"> 
        <div class="brown panel-heading"> 
         <h4 class="panel-title"> 
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_8"> 
           Accordion #3 
          </a> 
         </h4> 
        </div>  
        <div id="col_8" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
         </div> 
        </div> 
       </div> 

Answer 1

Ваш ребенок аккордеона элементы не разрушаются, потому что вы устанавливаете data-parent их собственные индивидуальные коробки. Если вы примените идентификатор accordion-sub до .panel-body, а затем измените свой data-parent в соответствии с вашим результатом, вы добьетесь чего-то функционального.

http://www.bootply.com/fceay0SjKE

Answer 2

У вас есть следующие скрипты и стили в вашем коде?

Поместите это в свой HTML-код или добавьте туда, где вам нужно, и оно должно работать как шарм. Я тестировал на своем локальном, имея весь этот код, код начальной загрузки действительно помогает ему!

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<script> 
$(function() { 
$("#accordion").accordion(); 
    }); 
</script> 

Answer 3

В вашей разметке div элементы не закрываются должным образом. И еще 2 data-parent атрибут внутреннего аккордеона также неверен. Я правильно их закрыл, и аккордеон работает.

Подробнее о Bootstrap Accordion Example и примените его внимательно.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="brown panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_1"> 
 
      Accordion #1 
 
     </a> 
 
     </h4> 
 
    </div> 
 
    <div id="col_1" class="panel-collapse collapse in"> 
 
     <div class="panel-body"> 
 
     <div class="panel-group" id="accordion-inner" role="tablist" aria-multiselectable="true"> 
 
     <div class="panel panel-default"> 
 
      <div class="pink panel-heading"> 
 
      <h4 class="panel-title" style="font-size: 14px;"> 
 
       <a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_2"> 
 
       Accordion #sub1 
 
       </a> 
 
      </h4> 
 
      </div> 
 
      <div id="col_2" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="pink panel-heading"> 
 
      <h4 class="panel-title" style="font-size: 14px;"> 
 
       <a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_3"> 
 
       Accordion #sub2 
 
       </a> 
 
      </h4> 
 
      </div> 
 
      <div id="col_3" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="pink panel-heading"> 
 
      <h4 class="panel-title" style="font-size: 14px;"> 
 
       <a class="accordion-toggle2" data-toggle="collapse" data-parent="#accordion-inner" href="#col_4"> 
 
       Accordion #sub3 
 
       </a> 
 
      </h4> 
 
      </div> 
 
      <div id="col_4" class="panel-collapse collapse"> 
 
      <div class="panel-body"> 
 
       <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="brown panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_7"> 
 
      Accordion #2 
 
      </a> 
 
     </h4> 
 
     </div> 
 
     <div id="col_7" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
      <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
     <div class="brown panel-heading"> 
 
     <h4 class="panel-title"> 
 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col_8"> 
 
      Accordion #3 
 
      </a> 
 
     </h4> 
 
     </div>  
 
     <div id="col_8" class="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
      <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
</div>