从文本链接搜索并打开/切换Bootrap手风琴

Question

我目前正在开发一个引导手风琴，它看起来像这样：

<div class="support-accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
<i class="feather-chevron-up"></i>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
<i class="feather-chevron-up"></i>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
<i class="feather-chevron-up"></i>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Accordion Item #4
<i class="feather-chevron-up"></i>
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur luctus maximus venenatis.</p>
</div>
</div>
</div>
</div>
</div>

到目前为止，一切都很好，默认情况下第一个手风琴会展开，当我点击其他手风琴时会关闭。现在，我想知道是否有一种方法可以滚动到并触发这些手风琴。例如，我在顶部有一个粘性导航，内容如下：

<div class="controls">
<ul class="quickselect-controls">
<li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 1</a></li>
<li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 2</a></li>
<li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 3</a></li>
<li><a href="#"><i class="feather-file"></i> Trigger and Scroll to Accordion 4</a></li>
</ul>
</div>

在理想的世界里，我想(一旦点击(这将自动切换特定的手风琴并滚动到它

非常感谢一些专家的帮助，谢谢

Answer 1

1. 滚动到特定卡：将href与要滚动到的id链接。

2. 显示：添加JS。

请参阅下面的片段。

$(document).ready(function() {
$(".trigger-1").click(function() {
// Show first card
$("#headingOne button").removeClass("collapsed");
$("#collapseOne").addClass("show");
// Hide all others
$(".accordion-header:not(#headingOne) button").addClass("collapsed");
$(".accordion-item > div:not(#collapseOne)").removeClass("show");
});
$(".trigger-2").click(function() {
// Show second card
$("#headingTwo button").removeClass("collapsed");
$("#collapseTwo").addClass("show");
// Hide all others
$(".accordion-header:not(#headingTwo) button").addClass("collapsed");
$(".accordion-item > div:not(#collapseTwo)").removeClass("show");
});
$(".trigger-3").click(function() {
// Show third card
$("#headingThree button").removeClass("collapsed");
$("#collapseThree").addClass("show");
// Hide all others
$(".accordion-header:not(#headingThree) button").addClass("collapsed");
$(".accordion-item > div:not(#collapseThree)").removeClass("show");
});
$(".trigger-4").click(function() {
// Show fourth card
$("#headingFour button").removeClass("collapsed");
$("#collapseFour").addClass("show");
// Hide all others
$(".accordion-header:not(#headingFour) button").addClass("collapsed");
$(".accordion-item > div:not(#collapseFour)").removeClass("show");
});
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="controls">
<ul class="quickselect-controls">
<li><a class="trigger-1" href="#headingOne"><i class="feather-file"></i> Trigger and Scroll to Accordion 1</a></li>
<li><a class="trigger-2" href="#headingTwo"><i class="feather-file"></i> Trigger and Scroll to Accordion 2</a></li>
<li><a class="trigger-3" href="#headingThree"><i class="feather-file"></i> Trigger and Scroll to Accordion 3</a></li>
<li><a class="trigger-4" href="#headingFour"><i class="feather-file"></i> Trigger and Scroll to Accordion 4</a></li>
</ul>
</div>
<div class="support-accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
<i class="feather-chevron-up"></i>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin
ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo
et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur
luctus maximus venenatis.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
<i class="feather-chevron-up"></i>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin
ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo
et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur
luctus maximus venenatis.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
<i class="feather-chevron-up"></i>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin
ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo
et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur
luctus maximus venenatis.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Accordion Item #4
<i class="feather-chevron-up"></i>
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin fringilla pulvinar neque quis facilisis. Nunc fermentum ipsum dolor, at dapibus odio semper eget. Quisque pulvinar magna vel pulvinar condimentum. Donec dictum urna elit, vel sollicitudin
ipsum lobortis suscipit. Quisque at quam quis nisi vehicula finibus id non lacus. Integer dignissim urna sit amet fringilla vestibulum. Aliquam sollicitudin ipsum quis felis cursus, vel sagittis orci varius. Morbi vestibulum fermentum leo
et malesuada. Quisque sodales, justo ut bibendum rhoncus, nisl felis posuere augue, a volutpat orci neque eu eros. Phasellus at ligula sed eros porttitor varius. Duis quam lacus, pharetra vestibulum nisi eget, vestibulum ultricies enim. Curabitur
luctus maximus venenatis.</p>
</div>
</div>
</div>
</div>
</div>