从导航链接滚动到手风琴并打开它

Question

我有 4 个自举手风琴都倒塌了。 从导航链接单击时（[href="#headingTwo"] 等...] 我只需要展开引用的手风琴。[如果单击另一个导航链接则关闭它]

所以下面的代码有效，但我重复了 4 次……它肯定可以简化为一个 function 吗？

// accordion 1
$('a.js-scroll-trigger[href="#headingTwo"]').on('click', function() {
  document.getElementById("collapseTwo").classList.add("show");
});

// accordion 2
$('a.js-scroll-trigger[href="#headingThree"]').on('click', function() {
  document.getElementById("collapseThree").classList.add("show");
});

// accordion 3
$[...]

// accordion 4
$[...]

提前谢谢了。

Answer 1

看起来你的锚点共享相同的 class .js-scroll-trigger ，你可以将点击处理程序分配给所有这些，在处理程序中你将从锚点的href获得目标手风琴项目，它是手风琴项目的id , 那么你就可以像下面这样触发项目按钮的click处理程序。

href包含 accordion header id ，该元素作为第一个子元素包含一个触发展开/折叠的button

<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
  </button>
</h2>

 $(function() { $("a.js-scroll-trigger").on("click", function() { var target = $(this).attr("href"); $(target).find("button").trigger("click"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <a href="#headingOne" class="js-scroll-trigger">Item 1</a> <a href="#headingTwo" class="js-scroll-trigger">Item 2</a> <a href="#headingThree" class="js-scroll-trigger">Item 3</a> </div> <br> <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 </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </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 </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </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 </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> </div>