Bootstrap手風琴錯誤行爲

我有（應該是）一個相當簡單的手風琴，表現得很奇怪。這裏是HTML：Bootstrap手風琴錯誤行爲

<div class="panel-group" id="accordion" style="width:100%;margin:0 1% 0 1%;padding:0 0 5px 0;text-align:center"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_Why_Body"> 
        <h3 id="Public_Home_Why"> 
         <strong> 
          {{Landing_Page_Messages.Why_Title}} 
         </strong> 
        </h3> 
       </a> 
      </h4> 
     </div> 
     <div id="Public_Home_Why_Body" class="panel-collapse collapse in"> 
      <div class="panel-body" style=";text-align:justify"> 
       <font size="4"> 
        {{Landing_Page_Messages.Why_Body}} 
       </font> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_What_Body"> 
        <h3 id="Public_Home_Why"> 
         <strong> 
          {{Landing_Page_Messages.What_Can_Do_Title}} 
         </strong> 
        </h3> 
       </a> 
      </h4> 
     </div> 
     <div id="Public_Home_What_Body" class="panel-collapse collapse"> 
      <div class="panel-body" style=";text-align:justify"> 
       <font size="4"> 
        {{Landing_Page_Messages.What_Can_Do_Body}} 
       </font> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" id="Public_Home_How"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_How_Body"> 
        <h3 id="Public_Home_Why"> 
         <strong> 
          {{Landing_Page_Messages.How_Does_it_Title}} 
         </strong> 
        </h3> 
       </a> 
      </h4> 
     </div> 
     <div id="Public_Home_How_Body" class="panel-collapse collapse"> 
      <div class="panel-body" style=";text-align:justify"> 
       <font size="4"> 
        {{Landing_Page_Messages.How_Does_it_Body}} 
       </font> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-default"> 
     <div class="panel-heading" id="Public_Home_Your_Role"> 
      <h4 class="panel-title"> 
       <a data-toggle="collapse" data-parent="#accordion" href="#main/#Public_Home_Your_Role_Body"> 
        <h3 id="Public_Home_Your_Role"> 
         <strong> 
          {{Landing_Page_Messages.Your_Role_Title}} 
         </strong> 
        </h3> 
       </a> 
      </h4> 
     </div> 
     <div id="Public_Home_Your_Role_Body" class="panel-collapse collapse"> 
      <div class="panel-body" style=";text-align:justify"> 
       <font size="4"> 
        {{Landing_Page_Messages.Your_Role_Body}} 
       </font> 
      </div> 
     </div> 
    </div> 
</div>

當頁面打開時，手風琴的第一個「文件夾」打開（而不是關閉）。我點擊的任何面板都會導致FIRST條目打開和關閉，但我點擊的面板的主體仍處於摺疊狀態。

我顯然有一些錯字，但...重新閱讀它幾十次後無法找到它。

任何人都可以檢查它，並指向我的錯誤？

非常感謝提前！

來源

2016-07-06 FDavidov

似乎按預期工作：http://codeply.com/go/456YFmMr0k – ZimSystem

同樣在這裏，它按預期工作。 – ProgrammerV5

謝謝你們倆的回覆。你能否提出一些我可以做一些跟蹤/調試的方法來找到它在我的情況下不起作用的原因？ – FDavidov

發現問題!!!

代碼中某處存在與手風琴其中一個面板同名的另一個元素。老實說，我偶然發現它（！）。

這也解釋了爲什麼由Skelly和ProgrammerV5執行的測試工作（在他們檢查的部分沒有名稱衝突）。

非常感謝那些花時間測試它的人。

來源

2016-07-06 15:15:06 FDavidov

Bootstrap手風琴錯誤行爲

回答

相關問題