我正在使用引导程序作为基础来构建网站,当时我处于飞行状态,但是现在我遇到了多个div崩溃的问题,我似乎无法找出是什么原因引起了任何建议?
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<h1 class="mt-4 mb-3">FAQ</h1>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.php">Home</a></li>
<li class="breadcrumb-item active">FAQ</li>
</ol>
<div class="mb-1" id="accordion" role="tablist" aria-multiselectable="true">
<!-- NestPanel-1 - Start -->
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">General</a></h5>
</div>
<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="card-body">
<div class="card" id="accordion">
<!-- NestPanel-1 Inner-1 - Start -->
<div class="card-default">
<div class="card-header"><h6 class="mb-0"><a data-toggle="collapse" data-parent="#accordion" href="#collapseInnerOne">Product</a></h6></div>
<div id="collapseInnerOne" class="card-collapse collapse in">
<div class="card-body">
<div class="faq-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#GeneralInfo" aria-expanded="true">
test
</button>
</h5>
</div>
<div id="GeneralInfo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
test
</div>
</div>
<div class="faq-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#GeneralInfo1" aria-expanded="true" >
test
</button>
</h5>
</div>
<div id="GeneralInfo1" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body" >
test
</div>
</div>
</div>
</div>
</div>
<!-- NestPanel-1 Inner-1 - End -->
<!-- NestPanel-1 Inner-2 - Start -->
<div class="card-default">
<div class="card-header"><h6 class="mb-0"><a data-toggle="collapse" data-parent="#accordion" href="#collapseInnerTwo">Services</a></h6></div>
<div id="collapseInnerTwo" class="card-collapse collapse">
<div class="card-body">
<div class="faq-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#GeneralServices" aria-expanded="true">
test
</button>
</h5>
</div>
<div id="GeneralServices" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body" >
test
</div>
</div>
<div class="faq-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#GeneralServices1" aria-expanded="true" >
test
</button>
</h5>
</div>
<div id="GeneralServices1" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body" >
test
</div>
</div>
<div class="faq-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#GeneralServices2" aria-expanded="true" >
test
</button>
</h5>
</div>
<div id="GeneralServices2" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body" >
test
</div>
</div>
</div>
</div>
</div>
<!-- NestPanel-1 Inner-2 - End -->
<!-- NestPanel-1 Inner-3 - Start -->
<div class="card-default">
<div class="card-header"><h6 class="mb-0"><a data-toggle="collapse" data-parent="#accordion" href="#collapseInnerThree">Care</a></h6></div>
<div id="collapseInnerThree" class="card-collapse collapse">
<div class="card-body">
<div class="faq-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#GeneralCare" aria-expanded="true" >
test
</button>
</h5>
</div>
<div id="GeneralCare" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body" >
Please <a href="contact.php">Contact us</a> and a member of staff will be able to assist you further.
</div>
</div>
</div>
</div>
</div>
<!-- NestPanel-1 Inner-3 - End -->
</div>
</div>
</div>
</div>
<!-- NestPanel-1 - End -->
</div>
<div class="mb-1" id="accordion1" role="tablist" aria-multiselectable="true">
<!-- NestPanel-2 - Start -->
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" aria-expanded="true" aria-controls="answerOne">Windows & Doors</a></h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="answerOne">
<div class="card-body">
<div class="card" id="accordion1">
<!-- NestPanel-2 Inner-1 - Start -->
<div class="card-default">
<div class="card-header">
<h6 class="mb-0"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOuterOne">Guarantees</a></h6>
</div>
<div id="collapseOuterOne" class="card-collapse collapse in">
<div class="card-body">
<div class="faq-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#WDGuarantee" aria-expanded="true">
test
</button>
</h5>
</div>
<div id="#WDGuarantee" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordion1">
<div class="card-body" >
test
</div>
</div>
</div>
</div>
</div>
<!-- NestPanel-2 Inner-1 - End -->
<!-- NestPanel-2 Inner-2 - Start -->
<div class="card-default">
<div class="card-header">
<h6 class="mb-0"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOuterTwo">Care</a></h6>
</div>
<div id="collapseOuterTwo" class="card-collapse collapse in">
<div class="card-body">
<div class="faq-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#WDCare" aria-expanded="true">
test
</button>
</h5>
</div>
<div id="#WDCare" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion1">
<div class="card-body" >
test
</div>
</div>
</div>
</div>
</div>
<!-- NestPanel-2 Inner-2 - End -->
</div>
</div>
</div>
</div>
<!-- NestPanel-2 - End -->
</div>
<div class="mb-4" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Conservatories</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
<!-- /.container -->
似乎第一部分工作得很好,但是第二部分没有响应,我不知道我在这里是否有金发时刻或什么?
答案 0 :(得分:0)
如注释中所建议,您在引用的目标中使用了无效的ID值。从ID属性值中删除“#”,您应该一切顺利。
如果这对您有帮助,请标记为答案。谢谢!