1. 首頁
  2. 問答
  3. Bootstrap/Jquery手風琴不起作用

Bootstrap/Jquery手風琴不起作用

2014-01-21 133 views
0

我在JSfiddle（​​）中創建了一個簡單的手風琴，它工作得很好。但是，當我嘗試在我的網站上覆制結果時，它只是不起作用。按下元素只會在URL的末尾添加#first，＃second和#third。可能因爲我是菜鳥，這個問題很容易解決，但我找不到它。這是我的首頁的整個代碼：Bootstrap/Jquery手風琴不起作用

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"/> 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery-ui.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.accordion.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.all.css"/> 
    <script src="lib/bootstrap.min.js"></script> 
    <script src="lib/fabric.min.js"></script> 
    <script src="lib/jquery-ui-1.10.4/jquery-1.10.2.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.accordion.js"></script> 


</head> 
<body> 

<div id="page"> 
    <header class="container"> 
     <div id="menu" class="navbar navbar-default"> 
      <ul class="nav navbar-nav"> 
       <li class="nav active"><a href="home.html">Home</a></li> 
       <li class="nav"><a href="login.php">Login</a></li> 
       <li class="nav"><a href="about.html">About</a></li> 
       <li class="nav" ><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 
    </header> 
</div> 




    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div id="accordion" class="panel-group"> 
        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
          <a href="#first" 
           data-toggle="collapse" 
           data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="first"> 
          <div class="panel-body"> 
           <p> First <p/> 
          </div> 
         </div> 
        </div> 

        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
           <a href="#second" 
            data-toggle="collapse" 
            data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="second"> 
          <div class="panel-body"> 
           <p> Second <p/> 
          </div> 
         </div> 
        </div> 

        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
           <a href="#third" 
            data-toggle="collapse" 
            data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="third"> 
          <div class="panel-body"> 
           <p> Third <p/> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 


      <div class="col-md-4"> 

      </div> 

      <div class="col-md-4"> 

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

我都在試圖使其工作增加這麼多不同的來源，但無濟於事。我正在逐一添加它們。

來源

2014-01-21 user2315641

+0

請問您是否也可以添加您的網站？ –

回答

0

您需要加載引導程序之前加載jquery。如果你看看你的控制檯，你可能會看到一個錯誤。你也應該把你的腳本放在你的底部，這樣你的腳本就不會阻塞UI的加載。

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"/> 
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery-ui.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.accordion.css"/> 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.4/themes/base/jquery.ui.all.css"/> 
</head> 
<body> 

<div id="page"> 
    <header class="container"> 
     <div id="menu" class="navbar navbar-default"> 
      <ul class="nav navbar-nav"> 
       <li class="nav active"><a href="home.html">Home</a></li> 
       <li class="nav"><a href="login.php">Login</a></li> 
       <li class="nav"><a href="about.html">About</a></li> 
       <li class="nav" ><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 
    </header> 
</div> 




    <div class="container"> 
     <div class="row"> 
      <div class="col-md-4"> 
       <div id="accordion" class="panel-group"> 
        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
          <a href="#first" 
           data-toggle="collapse" 
           data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="first"> 
          <div class="panel-body"> 
           <p> First <p/> 
          </div> 
         </div> 
        </div> 

        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
           <a href="#second" 
            data-toggle="collapse" 
            data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="second"> 
          <div class="panel-body"> 
           <p> Second <p/> 
          </div> 
         </div> 
        </div> 

        <div class="panel panel-info"> 
         <div class="panel-heading"> 
          <div class="panel-title"> 
           <a href="#third" 
            data-toggle="collapse" 
            data-parent="#accordion">Shape</a> 
          </div> 
         </div> 
         <div class="panel-collapse collapse" id="third"> 
          <div class="panel-body"> 
           <p> Third <p/> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 


      <div class="col-md-4"> 

      </div> 

      <div class="col-md-4"> 

      </div> 
     </div> 
    </div> 
    <script src="lib/jquery-ui-1.10.4/jquery-1.10.2.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script> 
    <script src="lib/jquery-ui-1.10.4/ui/jquery.ui.accordion.js"></script> 
    <script src="lib/bootstrap.min.js"></script> 
    <script src="lib/fabric.min.js"></script> 
</body> 
</html>

在您發佈，如果你檢查的結果，你會看到，自舉的jQuery後加載的jsfiddle。

<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title> - jsFiddle demo</title> 

    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 

    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 

    <style type="text/css"> 
     @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); 
     .panel-heading { 
      cursor: pointer; 
     } 
    </style> 

    <script type="text/javascript">//<![CDATA[ 
     $(window).load(function(){ 

     });//]]> 
    </script> 

</head>

來源

2014-01-21 11:23:54 psyrendust

+0

我知道這很容易，我只是在做新手的錯誤。非常感謝你。 – user2315641

相關問題

 相關問題