Bootstrap / Jquery手风琴无法正常工作
[英]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>
我添加了许多不同的资源以使其正常运行，但无济于事。 我是一个接一个地添加它们。
1 个解决方案
解决方案1
0 已采纳 2014-01-21 11:23:54
您需要先加载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>
jQuery在循环时各自无法正常工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.