2014-09-24 52 views
0

您可以測試這個非常簡單的崩潰引導:引導手風琴錯誤:崩潰切換回可見模式

http://www.getshoutbox.com/test.php

如果試圖瓦解回面板,它再次說明:這是最簡單的崩潰樣品:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>GAQ getSHoutBox</title> 

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script> 

<link href="css/bootstrap.css" rel='stylesheet' type='text/css' /> 
</head> 
<body> 


<div class="panel-group" id="accordion"> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <div class="panel-title"> 
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#first">First</a> 
      </div> 
     </div><!--Here heading has to close and collapse has to start--> 
     <div class="panel-collapse collapse" id="first"> 
      <div class="panel-body"> 
       <img src="images/lebowski-1.jpg" alt="1" /> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <div class="panel-title"> 
       <a class="collapsed" href="#secound" data-toggle="collapse" data-parent="#accordion"> 
        Secound</a> 
      </div> 
     </div> 
     <div class="panel-collapse collapse" id="secound"> 
      <div class="panel-body"> 
       <img src="images/lebowski-2.jpg" alt="2" /> 
      </div> 
     </div> 
    </div> 
    <div class="panel panel-info"> 
     <div class="panel-heading"> 
      <div class="panel-title"> 
       <a class="collapsed" href="#third" data-toggle="collapse" data-parent="#accordion">Third</a> 
      </div> 
     </div> 
     <div class="panel-collapse collapse" id="third"> 
      <div class="panel-body"> 
       <img src="images/lebowski-3.jpg" alt="3" /> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html> 

有什麼問題?

+0

你好你的手風琴不能正常工作,其我猜你的腳本有問題。請再次下載引導程序3的腳本。 – Kamil 2014-09-24 17:02:37

回答

0

試試這個

<!DOCTYPE HTML> 
<html> 
<head> 
<title>GAQ getSHoutBox</title> 

<link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"> 
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"> 
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script> 

</head> 
<body> 

<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="#collapseOne"> 
          Collapsible Accordion 1 
          </a> 
         </h4> 
        </div> 
        <div id="collapseOne" class="panel-collapse collapse in"> 
         <div class="panel-body"> 
          <img src="images/lebowski-1.jpg" alt="1" /> 
         </div> 
        </div> 
       </div> 


       <div class="panel panel-success"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> 
           Collapsible Accordion 2 
          </a> 
         </h4> 
        </div> 
        <div id="collapseFour" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <img src="images/lebowski-2.jpg" alt="2" /> 
         </div> 
        </div> 
       </div> 


       <div class="panel panel-warning"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> 
           Collapsible Accordion 3 
          </a> 
         </h4> 
        </div> 
        <div id="collapseFour" class="panel-collapse collapse"> 
         <div class="panel-body"> 
          <img src="images/lebowski-3.jpg" alt="3" /> 
         </div> 
        </div> 
       </div> 

     </div> 
</body> 
</html> 
0

,因爲你正在使用jQuery的V1.7.1

/*! jQuery v1.7.1 jquery.com | jquery.org/license */ 

和引導使用jQuery的v1.11.1

/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */