Bootstrap手風琴不折疊？

我遇到了自舉手風琴的麻煩。我希望手風琴打開一個特定的部分，然後關閉所有其他部分，以便只將焦點留在一個手風琴盒上。我也有一個嵌套的手風琴，我正在考慮導致一些問題。Bootstrap手風琴不折疊？

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>

來源

2016-08-04 giofus

你的孩子手風琴項目不會崩潰，因爲你設置data-parent自己單獨的盒子。如果您將accordion-sub的ID應用到.panel-body，然後更改您的data-parent以匹配您的功能。

http://www.bootply.com/fceay0SjKE

來源

2016-08-04 15:14:14

我遵循你的例子，它的作品是一種享受！謝謝。 – giofus

你有沒有在你的代碼下面的腳本和樣式？

將這些放入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>

來源

2016-08-04 15:13:29 CodingSince007

你爲什麼要建議他們加入jQuery用戶界面相關的CSS和JavaScript來糾正其基於引導手風琴？ –

因此，實際上@giofus可以刪除下面的腳本，它仍然很漂亮; – CodingSince007

在您的標記中，div元素未正確關閉。內手風琴的第二個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>

來源

2016-08-04 15:13:51

謝謝你的幫助 – giofus

Bootstrap手風琴不折疊？

回答

相關問題