[英]Bootstrap/Jquery accordion not working propertly
我已經在JSfiddle( http://jsfiddle.net/Rnpb2/ )中創建了一個簡單的手風琴,並且效果很好。 但是,當我嘗試在我的網站上復制結果時,它卻無法正常工作。 按下元素只是在URL的末尾添加#first,#second和#third。 可能因為我是新秀,這個問題很容易解決,但我找不到。 這是我頁面的全部代碼:
<!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>
我添加了許多不同的資源以使其正常運行,但無濟於事。 我是一個接一個地添加它們。
您需要先加載jquery,然后再加載引導程序。 如果您查看控制台,可能會看到錯誤。 另外,您應該將腳本放在html的底部,以使腳本不會阻止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>
在您發布的jsfiddle中,如果檢查結果,則會看到在jquery之后加載了引導程序。
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.