jquery 我需要的是第一个 accordion 内的一个复选框,如果复选框被点击,下一个 accordion 将自动打开

kninwzqo  于 2023-06-29  发布在  jQuery
关注(0)|答案(1)|浏览(83)

我在学习 accordion 的时候遇到了问题。我需要的是第一个 accordion 内的一个复选框,如果复选框是点击下一个 accordion 将自动打开,复选框是不点击下一个 accordion 将不会显示
任何解决方案或参考请分享
我需要的是第一个 accordion 内的一个复选框,如果复选框是点击下一个 accordion 将自动打开,复选框是不点击下一个 accordion 将不会显示

tez616oj

tez616oj1#

为了使用Bootstrap accordion和复选框实现所需的功能,您可以使用JavaScript列出复选框更改事件,然后根据复选框的状态以编程方式打开或关闭accordion。见下文示例;
HTML

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <input type="checkbox" id="checkboxOne" />
      <label for="checkboxOne">Toggle Accordion One</label>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse">
      <div class="accordion-body">Content of Accordion One</div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <input type="checkbox" id="checkboxTwo" />
      <label for="checkboxTwo">Toggle Accordion Two</label>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse">
      <div class="accordion-body">Content of Accordion Two</div>
    </div>
  </div>
</div>

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    const checkboxOne = document.getElementById("checkboxOne");
    const checkboxTwo = document.getElementById("checkboxTwo");

    const collapseOne = document.getElementById("collapseOne");
    const collapseTwo = document.getElementById("collapseTwo");

    checkboxOne.addEventListener("change", function() {
        if (this.checked) {
            collapseOne.classList.add("show")''
        } else {
            collapseOne.classList.remove("show");
        }
    });

    checkboxTwo.addEventListener("change", function() {
        if (this.checked) {
            collapseTwo.classList.add("show")''
        } else {
            collapseTwo.classList.remove("show");
        }
    });
});

在上面的示例中,每个可折叠项都有一个复选框和一个标签。该脚本将事件侦听器附加到复选框,当复选框被选中时,通过添加核心引导类show显示相关的 accordion 。此外,如果未选中该复选框,则会从类中删除引导类show,这将隐藏 accordion 。希望这对你有帮助或指出正确的方向,干杯!

相关问题