首先，我是所有这一切的新手。我最后一次编写HTML时没有CSS这样的东西，更不用说bootstrap了！我也不知道如何编写脚本。
我正在创建一个FYI页面，其中我使用链接到不同面板的药片/标签。大约有100个面板，每个药丸/标签每个显示约20个。最终的布局正是我想要的。当我打开面板时，一切都很好，但是当我打开另一个面板时，第一个面板不会自动关闭。大部分代码都来自互联网上的教程。我已经尝试过我能做的一切。救命啊！
感谢。
我的HTML看起来像这样：
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
<meta content="" name="description">
<meta content="" name="author"><!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Molly Xia Notary</title><!-- BOOTSTRAP CORE CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet"><!-- ION ICONS STYLES -->
<link href="assets/css/ionicons.css" rel="stylesheet"><!-- FONT AWESOME ICONS STYLES -->
<link href="assets/css/font-awesome.css" rel="stylesheet"><!-- FANCYBOX POPUP STYLES -->
<link href="assets/js/source/jquery.fancybox.css" rel="stylesheet"><!-- STYLES FOR VIEWPORT ANIMATION -->
<link href="assets/css/animations.min.css" rel="stylesheet"><!-- CUSTOM CSS -->
<link href="assets/css/style.css" rel="stylesheet"><!-- HTML5 Shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
</head><!--FAQ SECTION START-->
<body>
<section id="faq">
<div class="container">
<div class="row text-l header animate-in" data-anim-type="fade-in-up">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<br>
<br>
<h3>Frequently Asked Questions</h3>
<hr>
</div>
</div>
<div class="row animate-in" data-anim-type="fade-in-up">
<div class="col-md-10 col-md-offset-1">
<div class="faq-wrapper">
<div class="panel-group" id="faqAccordion">
<!-- Nav tabs -->
<div class="card">
<ul class="nav nav-pills nav-stacked pill-catagory" role="tablist">
<li role="presentation">
<a data-toggle="pill" href="#home" role="tab"></a>
</li>
<li class="active" role="presentation">
<a align="center" data-toggle="pill" href="#office" role="tab">General Office Questions</a>
</li>
<li role="presentation">
<a align="center" data-toggle="pill" href="#poa" role="tab">Power of Attorney Questions</a>
</li>
<li role="presentation">
<a align="center" data-toggle="pill" href="#wills" role="tab">Will Questions</a>
</li>
<li role="presentation">
<a align="center" data-toggle="pill" href="#rep" role="tab">Representation Agreement Questions</a>
</li>
</ul>
</div>
<!-- Tab panes -->
<br>
<div class="tab-content">
<!--BEGINNING OF GENERAL QUESTIONS -->
<div class="tab-pane fade in active" id="office" role="tabpanel">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-a1" data-toggle="collapse">
<h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> OFFICE 1</a></h4>
</div>
<div class="panel-collapse collapse" id="question-a1" style="height: 0px;">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
<p>This is an answer</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-a2" data-toggle="collapse">
<h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> OFFICE 2</a></h4>
</div>
<div class="panel-collapse collapse" id="question-a2">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
<p>Another answer</p>
</div>
</div>
</div>
</div>
<!-- END OF GENERAL QUESTIONS-->
<!-- BEGINNING OF POA QUESTIONS-->
<div class="tab-pane fade in" id="poa" role="tabpanel">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-b1" data-toggle="collapse">
<h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> POA 1</a></h4>
</div>
<div class="panel-collapse collapse" id="question-b1">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
<p>Hello</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-b2" data-toggle="collapse">
<h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> POA 2</a></h4>
</div>
<div class="panel-collapse collapse" id="question-b2">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
<p>How's the weather?</p>
</div>
</div>
</div>
</div>
<!-- END OF POA QUESTIONS-->
<!-- BEGINNING OF WILLS QUESTIONS-->
<div class="tab-pane fade in" id="wills" role="tabpanel">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-c1" data-toggle="collapse">
<h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> WILL 1</a></h4>
</div>
<div class="panel-collapse collapse" id="question-c1">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
<p>Watcha doin' today?</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-c2" data-toggle="collapse">
<h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> WILL 2</a></h4>
</div>
<div class="panel-collapse collapse" id="question-c2">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
<p>This is just not working!</p>
</div>
</div>
</div>
</div><!-- END OF WILL QUESTIONS-->
<!-- BEGINNING OF REPRESENTATION AGREEMENT QUESTIONS-->
<div class="tab-pane fade in" id="rep" role="tabpanel">
<div class="panel panel-default">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-d1" data-toggle="collapse">
<h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> REP 1</a></h4>
</div>
<div class="panel-collapse collapse" id="question-d1">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
<p>A wasted weekend...</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading accordion-toggle question-toggle collapsed" data-parent="#faqAccordion" data-target="#question-d2" data-toggle="collapse">
<h4 class="panel-title"><a class="accordion-toggle" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"><span class="glyphicon glyphicon-plus"></span> REP 2</a></h4>
</div>
<div class="panel-collapse collapse" id="question-d2">
<div class="panel-body">
<h5><span class="label label-primary">Answer</span></h5>
<p>It is hot and humid.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<!--FAQ SECTION END-->
<!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY -->
<script src="assets/js/jquery-1.11.1.js">
</script> <!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.js">
</script> <!-- EASING SCROLL SCRIPTS PLUGIN -->
<script src="assets/js/vegas/jquery.vegas.min.js">
</script> <!-- VEGAS SLIDESHOW SCRIPTS -->
<script src="assets/js/jquery.easing.min.js">
</script> <!-- FANCYBOX PLUGIN -->
<script src="assets/js/source/jquery.fancybox.js">
</script> <!-- ISOTOPE SCRIPTS -->
<script src="assets/js/jquery.isotope.js">
</script> <!-- VIEWPORT ANIMATION SCRIPTS -->
<script src="assets/js/appear.min.js">
</script>
<script src="assets/js/animations.min.js">
</script> <!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom-solid.js">
</script> <!-- This script hides the mobile menu upon click -->
<script>
$(document).ready(function() {
$('.nav a').on('click', function() {
if ($(".btn-navbar").is(":visible")) {
$(".btn-navbar").trigger("click");
} //bootstrap 2.x
if ($(".navbar-toggle").is(":visible")) {
$(".navbar-toggle").trigger("click");
} //bootstrap 3.x
});
});
</script> <!-- This script toggles the FAQ section from plus to minus on click -->
<script>
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
</script>
</body>
</html>
答案 0 :(得分：0)
让我再试一次......试着在我的手机上接听，这是一个可怕的选择。
以下是您尝试做的事情的一个示例。默认情况下，可折叠面板应一次打开一个。乍一看，您似乎已经修改或省略了获得此预期功能所需的面板组包装器。具体来说，您似乎已经使用ID #faqAccordion标识了您的面板组，但在您的标签上，您将数据父级称为#acordord。
标准引导程序可折叠格式（从其网站稍微修改一下）：
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-empty">
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
<a class="collapsed" >
<i class="fa fa-plus"></i> Title
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
Answer
</div>
</div>
</div>
<div class="panel panel-empty">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
<a class="collapsed" >
<i class="fa fa-plus"></i> Title
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
Answer
</div>
</div>
</div>
</div>
为了让您的优点和缺点正常工作，您需要在打开面板时更改所有可折叠项目的类。
$('.panel-title').click(function() {
if ($(this).find('.fa').hasClass('fa-plus')) {
$('#faq .fa').removeClass('fa-minus').addClass('fa-plus');
$(this).find('.fa').removeClass('fa-plus').addClass('fa-minus');
} else {
$(this).find('.fa').removeClass('fa-minus').addClass('fa-plus');
}
});
这个例子使用的是fontawesome而不是glyphicons，但它是相同的主体。我还使用#faq作为包装，以确保可折叠项目仅在我网站上的特定部分受到影响。
下面的笔显示了它们是如何结合在一起的。
答案 1 :(得分：0)
删除班级＆＃34;在＆＃34;并没有任何区别。当另一个打开时，打开的面板仍然不会折叠。