地址，并通过锚链接打开一个引导手风琴

Question

下面是我想要实现的:

我正在使用Bootstrap v3.4.1有两个并排的列。我想使用链接在热点横幅(左列)中定位相关的accordion(右列)，也可以直接打开它们。

有人知道这是如何实现的吗?

在左栏我有一个热点横幅:

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<section class="hotspots--wrapper"> 
<img src="/images/produktbeschreibung/wheel-585x.png" alt="" class="hotspots--figure"> 
<a class="hotspot hotspot--harz" href="#"> 
<span class="hotspot--title hotspot--title__right">Harz</span> 
<span class="hotspot--cta"></span> </a> 
<a class="hotspot hotspot--felge" href="#collapse3"> 
<span class="hotspot--title">Felge</span> 
<span class="hotspot--cta"></span> </a> 
<a class="hotspot hotspot--speichen" href="#"> 
<span class="hotspot--title hotspot--title__right">Speichen</span> 
<span class="hotspot--cta"></span> </a> 
<a class="hotspot hotspot--nabe" href="#"> 
<span class="hotspot--title hotspot--title__right">Nabe</span> 
<span class="hotspot--cta"></span> </a> 
</section>
</div>

在右栏我有一个引导手风琴:

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default">
<div class="faq-panel-heading" id="heading1" role="tab">
<h4 class="panel-title">
<button class="btn btn-block faq collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapse1" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Harz</button>
</h4>
</div>
<div class="faq panel-collapse collapse" id="collapse1" role="tabpanel" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>some text</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="faq-panel-heading" id="heading2" role="tab">
<h4 class="panel-title">
<button class="btn btn-block faq collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapse2" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Felge</button>
</h4>
</div>
<div class="faq panel-collapse collapse" id="collapse2" role="tabpanel" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>some text</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="faq-panel-heading" id="heading3" role="tab">
<h4 class="panel-title">
<button class="btn btn-block faq collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapse3" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Speichen</button>
</h4>
</div>
<div class="faq panel-collapse collapse" id="collapse3" role="tabpanel" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>some text</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="faq-panel-heading" id="heading4" role="tab">
<h4 class="panel-title">
<button class="btn btn-block faq collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapse4" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Name</button>
</h4>
</div>
<div class="faq panel-collapse collapse" id="collapse4" role="tabpanel" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>some text</p>
</div>
</div>
</div>
</div>
</div>

Answer 1

添加data-toggle="collapse" href="#collapse2"到链接中，打开#collapse2。为了防止hashchange事件触发，您可以将<a>元素更改为另一个标签，例如' '

.btn-link {
cursor: pointer
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<section class="hotspots--wrapper">
<img src="/images/produktbeschreibung/wheel-585x.png" alt="" class="hotspots--figure">
<span class="hotspot hotspot--harz btn-link" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<span class="hotspot--title hotspot--title__right">Harz</span>
<span class="hotspot--cta"></span>
</span>
<span class="hotspot hotspot--felge btn-link" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<span class="hotspot--title">Felge</span>
<span class="hotspot--cta"></span>
</span>
<span class="hotspot hotspot--speichen btn-link" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
<span class="hotspot--title hotspot--title__right">Speichen</span>
<span class="hotspot--cta"></span>
</span>
<span class="hotspot hotspot--nabe btn-link" data-toggle="collapse" data-parent="#accordion" href="#collapse4">
<span class="hotspot--title hotspot--title__right">Nabe</span>
<span class="hotspot--cta"></span>
</span>
</section>
</div>

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="panel-group" id="accordion" role="tablist">
<div class="panel panel-default">
<div class="faq-panel-heading" id="heading1" role="tab">
<h4 class="panel-title">
<button class="btn btn-block faq collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapse1" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Harz</button>
</h4>
</div>
<div class="faq panel-collapse collapse" id="collapse1" role="tabpanel" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>some text</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="faq-panel-heading" id="heading2" role="tab">
<h4 class="panel-title">
<button class="btn btn-block faq collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapse2" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Felge</button>
</h4>
</div>
<div class="faq panel-collapse collapse" id="collapse2" role="tabpanel" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>some text</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="faq-panel-heading" id="heading3" role="tab">
<h4 class="panel-title">
<button class="btn btn-block faq collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapse3" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Speichen</button>
</h4>
</div>
<div class="faq panel-collapse collapse" id="collapse3" role="tabpanel" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>some text</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="faq-panel-heading" id="heading4" role="tab">
<h4 class="panel-title">
<button class="btn btn-block faq collapsed" data-parent="#accordion" data-toggle="collapse" href="#collapse4" style="text-align:left; white-space:normal;" type="button" aria-expanded="false">Name</button>
</h4>
</div>
<div class="faq panel-collapse collapse" id="collapse4" role="tabpanel" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<p>some text</p>
</div>
</div>
</div>
</div>
</div>