1. 首頁
  2. 問答
  3. 爲什麼這個Bootstrap在一個部分打開時會關閉其他人？

爲什麼這個Bootstrap在一個部分打開時會關閉其他人？

2016-10-12 70 views
0

我已經使用了標準的Booststrap代碼，它曾經在開始工作，所以一旦任何部分被打開，之前打開的另一個部分被關閉。爲什麼這個Bootstrap在一個部分打開時會關閉其他人？

我已經在其中添加了一些其他的崩潰，並且確保所有ID的唯一性，除了關閉其他部分打開時關閉的一小部分時，它的工作正常。請幫我弄清楚

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
       <div class="panel-default mainPFPanel"> 
        <div class="mainPFPanelHeading" role="tab" id="headingMain1"> 
         <h4 class="panel-title text-left"> 
          <a role="button" data-toggle="collapse" data-parent="#accordion" 
           href="#collapseMain1" aria-expanded="true" aria-controls="collapseMain1"> 
           ТОРТЫ 
          </a> 
         </h4> 
        </div> 
        <div id="collapseMain1" class="panel-collapse collapse in" role="tabpanel" 
         aria-labelledby="headingMain1"> 
         <div class="panel-body mainPFPanelBody"> 
          <div class="panel-group" id="accordionSub1" role="tablist" aria-multiselectable="true"> 
           <div class="panel-default mainPFPanel"> 
            <div class="subPFPanelHeading" role="tab" id="headingSub11"> 
             <h4 class="panel-title text-left"> 
              <a role="button" data-toggle="collapse" data-parent="#accordionSub1" 
               href="#collapseSub11" aria-expanded="true" 
               aria-controls="collapseCollapse11"> 
               МУССОВЫЕ 
              </a> 
             </h4> 
            </div> 
            <div id="collapseSub11" class="panel-collapse collapse in" role="tabpanel" 
             aria-labelledby="headingSub11"> 
             <div class="subPFBody"> 
              <div class="list-group"> 
               <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a> 
               <a href="#" class="list-group-itemPF">Манго-Маракуйя</a> 
               <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a> 
               <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a> 
               <a href="#" class="list-group-itemPF">Ривьера</a> 
               <a href="#" class="list-group-itemPF">Клюква-Малина</a> 
               <a href="#" class="list-group-itemPF">Black Bourbon</a> 
               <a href="#" class="list-group-itemPF">Шоколад-Малина</a> 
               <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a> 
               <a href="#" class="list-group-itemPF">Карамель-Шоколад</a> 
               <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a> 
              </div> 
             </div> 
            </div> 
           </div> 
           <div class="panel-default mainPFPanel"> 
            <div class="subPFPanelHeading" role="tab" id="headingSub12"> 
             <h4 class="panel-title text-left"> 
              <a class="collapsed" role="button" data-toggle="collapse" 
               data-parent="#accordionSub1" href="#collapseSub12" 
               aria-expanded="false" aria-controls="collapseSub12"> 
               ЧИЗКЕЙКИ 
              </a> 
             </h4> 
            </div> 
            <div id="collapseSub12" class="panel-collapse collapse" role="tabpanel" 
             aria-labelledby="headingSub12"> 
             <div class="subPFBody"> 
              <div class="subPFBody"> 
               <div class="list-group"> 
                <a href="#" class="list-group-itemPF">Классический</a> 
                <a href="#" class="list-group-itemPF">Карамельный</a> 
                <a href="#" class="list-group-itemPF">Ягодный</a> 
               </div> 
              </div> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="panel-default mainPFPanel"> 
        <div class="mainPFPanelHeading" role="tab" id="headingMain2"> 
        <h4 class="panel-title text-left"> 
         <a class="collapsed" role="button" data-toggle="collapse" 
          data-parent="#accordionMain" href="#collapseMain2" aria-expanded="false" 
          aria-controls="collapseMain2"> 
          ТАРТЫ 
         </a> 
        </h4> 
       </div> 
        <div id="collapseMain2" class="panel-collapse collapse" role="tabpanel" 
        aria-labelledby="headingMain2"> 
        <div class="subPFBody"> 
         <div class="list-group"> 
          <a href="#" class="list-group-itemPF">Ягодные</a> 
          <a href="#" class="list-group-itemPF">Лимонные</a> 
          <a href="#" class="list-group-itemPF">Фруктовые</a> 
         </div> 
        </div> 
       </div> 
       </div> 
       <div class="panel-default mainPFPanel"> 
        <div class="mainPFPanelHeading" role="tab" id="headingMain3"> 
        <h4 class="panel-title"> 
         <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionMain" 
          href="#collapseMain3" aria-expanded="false" aria-controls="collapseMain3"> 
          ПОРЦИОННЫЕ ДЕСЕРТЫ 
         </a> 
        </h4> 
       </div> 
        <div id="collapseMain3" class="panel-collapse collapse" role="tabpanel" 
        aria-labelledby="headingMain3"> 
        <div class="panel-body"> 
         <div class="panel-default"> 
          <div class="subPFPanelHeading" role="tab" id="headingSub31"> 
           <h4 class="panel-title"> 
            <a role="button" data-toggle="collapse" data-parent="#accordionSub3" 
             href="#collapseSub31" aria-expanded="true" 
             aria-controls="collapseSub31"> 
             МУССОВЫЕ 
            </a> 
           </h4> 
          </div> 
          <div id="collapseSub31" class="panel-collapse collapse in" role="tabpanel" 
           aria-labelledby="headingSub31"> 
           <div class="subPFBody"> 
            <div class="list-group"> 
             <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a> 
             <a href="#" class="list-group-itemPF">Манго-Маракуйя</a> 
             <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a> 
             <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a> 
             <a href="#" class="list-group-itemPF">Ривьера</a> 
             <a href="#" class="list-group-itemPF">Клюква-Малина</a> 
             <a href="#" class="list-group-itemPF">Black Bourbon</a> 
             <a href="#" class="list-group-itemPF">Шоколад-Малина</a> 
             <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a> 
             <a href="#" class="list-group-itemPF">Карамель-Шоколад</a> 
             <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="panel-default"> 
          <div class="subPFPanelHeading" role="tab" id="headingSub32"> 
           <h4 class="panel-title"> 
            <a class="collapsed" role="button" data-toggle="collapse" 
             data-parent="#accordionSub3" href="#collapseSub32" aria-expanded="false" 
             aria-controls="collapseSub32"> 
             КЕЙКПОПСЫ 
            </a> 
           </h4> 
          </div> 
          <div id="collapseSub32" class="panel-collapse collapse" role="tabpanel" 
           aria-labelledby="headingSub32"> 
           <div class="subPFBody"> 
            <div class="list-group"> 
             <a href="#" class="list-group-itemPF">Шоколад-Карамель</a> 
             <a href="#" class="list-group-itemPF">Бана-Малина</a> 
             <a href="#" class="list-group-itemPF">С Лимонным Курдом</a> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="panel-default"> 
          <div class="subPFPanelHeading" role="tab" id="headingSub33"> 
           <h4 class="panel-title"> 
            <a class="collapsed" role="button" data-toggle="collapse" 
             data-parent="#accordionSub3" href="#collapseSub33" aria-expanded="false" 
             aria-controls="collapseSub33"> 
             КАПКЕЙКИ 
            </a> 
           </h4> 
          </div> 
          <div id="collapseSub33" class="panel-collapse collapse" role="tabpanel" 
           aria-labelledby="headingSub33"> 
           <div class="subPFBody"> 
            <div class="list-group"> 
             <a href="#" class="list-group-itemPF">Шоколад-Карамель</a> 
             <a href="#" class="list-group-itemPF">Бана-Малина</a> 
             <a href="#" class="list-group-itemPF">С Лимонным Курдом</a> 
            </div> 
           </div> 
          </div> 
         </div> 
         <div class="panel-default"> 
          <div class="subPFPanelHeading" role="tab" id="headingSub34"> 
           <h4 class="panel-title"> 
            <a class="collapsed" role="button" data-toggle="collapse" 
             data-parent="#accordionSub3" href="#collapseSub34" aria-expanded="false" 
             aria-controls="collapseSub34"> 
             ТАРТАЛЕТКИ 
            </a> 
           </h4> 
          </div> 
          <div id="collapseSub34" class="panel-collapse collapse" role="tabpanel" 
           aria-labelledby="headingSub34"> 
           <div class="subPFBody"> 
            <div class="list-group"> 
             <a href="#" class="list-group-itemPF">Ягодные</a> 
             <a href="#" class="list-group-itemPF">Лимонные</a> 
             <a href="#" class="list-group-itemPF">Фруктовые</a> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       </div> 
      </div>

來源

2016-10-12 Arthur Artsabliuk

+0

退房的解決方案在這裏：http://stackoverflow.com/questions/14248194/close-responsive-navbar-automatically – ZombieChowder

回答

0

正確的data-parent屬性對於正確控制手風琴很重要，數據目標需要正確設置。

這應該工作：

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
       </head> 
 
       <body> 
 

 
        <div class="container"> 
 
         <div class="panel-group" id="accordion"> 
 
          <div class="panel panel-default"> 
 
           <div class="panel-heading"> 
 
            <h4 class="panel-title"> 
 
             <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">ТОРТЫ</a> 
 
            </h4> 
 
           </div> 
 
           <div id="collapse1" class="panel-collapse collapse in"> 
 
            <div class="panel-body"> 
 
             <div class="container"> 
 
              <div class="panel-group" id="accordionSub"> 
 
               <div class="panel panel-default"> 
 
                <div class="panel-heading"> 
 
                 <h4 class="panel-title"> 
 
                  <a data-toggle="collapse" data-parent="#accordionSub" href="#collapse11">МУССОВЫЕ</a> 
 
                 </h4> 
 
                </div> 
 
                <div id="collapse11" class="panel-collapse collapse in"> 
 
                 <div class="panel-body"> 
 
                  <div class="list-group"> 
 
                   <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a> 
 
                   <a href="#" class="list-group-itemPF">Манго-Маракуйя</a> 
 
                   <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a> 
 
                   <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a> 
 
                   <a href="#" class="list-group-itemPF">Ривьера</a> 
 
                   <a href="#" class="list-group-itemPF">Клюква-Малина</a> 
 
                   <a href="#" class="list-group-itemPF">Black Bourbon</a> 
 
                   <a href="#" class="list-group-itemPF">Шоколад-Малина</a> 
 
                   <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a> 
 
                   <a href="#" class="list-group-itemPF">Карамель-Шоколад</a> 
 
                   <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a> 
 
                  </div> 
 
                 </div> 
 
                </div> 
 
               </div> 
 
               <div class="panel panel-default"> 
 
                <div class="panel-heading"> 
 
                 <h4 class="panel-title"> 
 
                  <a data-toggle="collapse" data-parent="#accordionSub" href="#collapse21">ЧИЗКЕЙКИ</a> 
 
                 </h4> 
 
                </div> 
 
                <div id="collapse21" class="panel-collapse collapse"> 
 
                 <div class="panel-body"><div class="list-group"> 
 
                  <a href="#" class="list-group-itemPF">Классический</a> 
 
                  <a href="#" class="list-group-itemPF">Карамельный</a> 
 
                  <a href="#" class="list-group-itemPF">Ягодный</a> 
 
                 </div></div> 
 
                </div> 
 
               </div> 
 
              </div> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </div> 
 
          <div class="panel panel-default"> 
 
           <div class="panel-heading"> 
 
            <h4 class="panel-title"> 
 
             <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> ТАРТЫ </a> 
 
            </h4> 
 
           </div> 
 
           <div id="collapse2" class="panel-collapse collapse"> 
 
            <div class="panel-body"><div class="list-group"> 
 
             <a href="#" class="list-group-itemPF">Ягодные</a> 
 
             <a href="#" class="list-group-itemPF">Лимонные</a> 
 
             <a href="#" class="list-group-itemPF">Фруктовые</a> 
 
            </div></div> 
 
           </div> 
 
          </div> 
 
          <div class="panel panel-default"> 
 
           <div class="panel-heading"> 
 
            <h4 class="panel-title"> 
 
             <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">ПОРЦИОННЫЕ ДЕСЕРТЫ</a> 
 
            </h4> 
 
           </div> 
 
           <div id="collapse3" class="panel-collapse collapse"> 
 
            <div class="panel-body"> 
 

 

 
             <div class="panel-group" id="accordionSub2"> 
 
              <div class="panel panel-default"> 
 
               <div class="panel-heading"> 
 
                <h4 class="panel-title"> 
 
                 <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse12"> 
 
                 МУССОВЫЕ </a> 
 
                </h4> 
 
               </div> 
 
               <div id="collapse12" class="panel-collapse collapse in"> 
 
                <div class="panel-body"><div class="list-group"> 
 
                 <a href="#" class="list-group-itemPF">Роза-Малина-Личи</a> 
 
                 <a href="#" class="list-group-itemPF">Манго-Маракуйя</a> 
 
                 <a href="#" class="list-group-itemPF">Черника-Ваниль-Малинаc</a> 
 
                 <a href="#" class="list-group-itemPF">Клубника-Брют "ROSE</a> 
 
                 <a href="#" class="list-group-itemPF">Ривьера</a> 
 
                 <a href="#" class="list-group-itemPF">Клюква-Малина</a> 
 
                 <a href="#" class="list-group-itemPF">Black Bourbon</a> 
 
                 <a href="#" class="list-group-itemPF">Шоколад-Малина</a> 
 
                 <a href="#" class="list-group-itemPF">Фисташка-Малина (вишня)</a> 
 
                 <a href="#" class="list-group-itemPF">Карамель-Шоколад</a> 
 
                 <a href="#" class="list-group-itemPF">Ванильно-Сливочная Груша</a> 
 
                </div></div> 
 
               </div> 
 
              </div> 
 
              <div class="panel panel-default"> 
 
               <div class="panel-heading"> 
 
                <h4 class="panel-title"> 
 
                 <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse22"> 
 
                 КЕЙКПОПСЫ </a> 
 
                </h4> 
 
               </div> 
 
               <div id="collapse22" class="panel-collapse collapse"> 
 
                <div class="panel-body"><div class="list-group"> 
 
                 <a href="#" class="list-group-itemPF">Шоколад-Карамель</a> 
 
                 <a href="#" class="list-group-itemPF">Бана-Малина</a> 
 
                 <a href="#" class="list-group-itemPF">С Лимонным Курдом</a> 
 
                </div></div> 
 
               </div> 
 
              </div> 
 
              <div class="panel panel-default"> 
 
               <div class="panel-heading"> 
 
                <h4 class="panel-title"> 
 
                 <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse32"> 
 
                 КАПКЕЙКИ</a> 
 
                </h4> 
 
               </div> 
 
               <div id="collapse32" class="panel-collapse collapse"> 
 
                <div class="panel-body"><div class="list-group"> 
 
                 <a href="#" class="list-group-itemPF">Шоколад-Карамель</a> 
 
                 <a href="#" class="list-group-itemPF">Бана-Малина</a> 
 
                 <a href="#" class="list-group-itemPF">С Лимонным Курдом</a> 
 
                </div></div> 
 
               </div> 
 
              </div> 
 

 
              <div class="panel panel-default"> 
 
               <div class="panel-heading"> 
 
                <h4 class="panel-title"> 
 
                 <a data-toggle="collapse" data-parent="#accordionSub2" href="#collapse42"> 
 
                 ТАРТАЛЕТКИ </a> 
 
                </h4> 
 
               </div> 
 
               <div id="collapse42" class="panel-collapse collapse"> 
 
                <div class="panel-body"><div class="list-group"> 
 
                 <a href="#" class="list-group-itemPF">Ягодные</a> 
 
                 <a href="#" class="list-group-itemPF">Лимонные</a> 
 
                 <a href="#" class="list-group-itemPF">Фруктовые</a> 
 
                </div></div> 
 
               </div> 
 
              </div> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </div> 
 
         </div> 
 
        </div> 
 

 
       </body> 
 
      </html>

來源

2016-10-12 15:56:10

+0

沒錯，它確實，非常感謝您的快速和正確的迴應！ –

相關問題

 相關問題