我在学习 accordion 的时候遇到了问题。我需要的是第一个 accordion 内的一个复选框,如果复选框是点击下一个 accordion 将自动打开,复选框是不点击下一个 accordion 将不会显示任何解决方案或参考请分享我需要的是第一个 accordion 内的一个复选框,如果复选框是点击下一个 accordion 将自动打开,复选框是不点击下一个 accordion 将不会显示
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 。希望这对你有帮助或指出正确的方向,干杯!
show
1条答案
按热度按时间tez616oj1#
为了使用Bootstrap accordion和复选框实现所需的功能,您可以使用JavaScript列出复选框更改事件,然后根据复选框的状态以编程方式打开或关闭accordion。见下文示例;
HTML
JavaScript
在上面的示例中,每个可折叠项都有一个复选框和一个标签。该脚本将事件侦听器附加到复选框,当复选框被选中时,通过添加核心引导类
show
显示相关的 accordion 。此外,如果未选中该复选框,则会从类中删除引导类show
,这将隐藏 accordion 。希望这对你有帮助或指出正确的方向,干杯!