BootStrap手风琴面板
[英]BootStrap Accordion Panel
问题描述
我正在尝试使用Bootstrap构建Accordion Panel。 但是，当我单击链接时，它不会崩溃。 我不确定是什么问题。 Bootstrap.css，我从官方引导网站下载。 这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Accordion</h2>
<hr/>
<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="#section1">
Question1
</a>
</h4>
</div>
<!-- End of heading -->
<div class="panel-collapse collapse in" id="section1">
<div class="panel-body">
This is the body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
任何帮助将不胜感激。 谢谢。
1 个解决方案
解决方案1
1 已采纳 2016-06-27 06:16:47
代码不错，但是您缺少Jquery和Bootstrap js
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h2>Accordion</h2> <hr/> <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="#section1"> Question1 </a> </h4> </div> <!-- End of heading --> <div class="panel-collapse collapse in" id="section1"> <div class="panel-body"> This is the body </div> </div> </div> </div> </div> </div> </div>
在这里查看更新的jsfiddle https://jsfiddle.net/pup3xtto/
Bootstrap 3手风琴面板问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.