如何同時打開所有 Bootstrap 5 手風琴而不關閉已經打開的手風琴
[英]How to open all the Bootstrap 5 accordions simultaneously without closing the ones that were already open
問題描述
我有一架手風琴
單擊單個手風琴項時，如何同時打開所有手風琴項？
假設我們有這種情況：
手風琴項目 #1 打開
手風琴項目 #2 已關閉
手風琴項目 #2 已關閉
如果我們單擊項目#2 或#3，三個手風琴將打開（手風琴#1 將保持打開狀態），然后如果我們再次單擊某個手風琴項目，三個手風琴將同時關閉。
<body> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> <div class="container"> <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> </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> </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> </div> </div> </div> </div> </div> </body>
@nontechguy 答案已編輯：
<html> <head> <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> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="accordion" id="accordionPanelsStayOpenExample"> <div class="accordion-item"> <h2 class="accordion-header" id="panelsStayOpen-headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen"> Accordion Item #1 </button> </h2> <div id="" class="panelsStayOpen accordion-collapse collapse show"> <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="panelsStayOpen-headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen"> Accordion Item #2 </button> </h2> <div id="" class="panelsStayOpen accordion-collapse collapse"> <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="panelsStayOpen-headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen"> Accordion Item #3 </button> </h2> <div id="" class="panelsStayOpen accordion-collapse collapse"> <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> </body> </html>
2 個解決方案
解決方案1
1 2022-01-11 04:29:03
希望開始解決您的部分請求？ 單擊任何手風琴項時，所有手風琴項將同時打開和關閉。
<html> <head> <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> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <div class="accordion" id="accordionPanelsStayOpenExample"> <div class="accordion-item"> <h2 class="accordion-header" id="panelsStayOpen-headingOne"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen"> Accordion Item #1 </button> </h2> <div id="" class="panelsStayOpen accordion-collapse collapse"> <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="panelsStayOpen-headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen"> Accordion Item #2 </button> </h2> <div id="" class="panelsStayOpen accordion-collapse collapse"> <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="panelsStayOpen-headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".panelsStayOpen"> Accordion Item #3 </button> </h2> <div id="" class="panelsStayOpen accordion-collapse collapse"> <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> </body> </html>
解決方案2
1 2022-01-11 06:01:10
我不認為 Bootstrap 默認為您的測試用例提供任何內容。 您想要的是檢測折疊時的show或hide事件，然后手動控制每個手風琴。 我從他們的文檔中獲取了基本示例，並對其進行了修改。 你想要這樣的東西嗎？
const accordion = document.getElementById('accordionExample'), accordionCollapses = Array.from(document.querySelectorAll('.accordion-collapse')); accordionCollapses.forEach((accordionCollapse) => { accordionCollapse.addEventListener('show.bs.collapse', (event) => { accordionCollapses.forEach((accordionCollapse) => { accordionCollapse.className = 'accordion-collapse collapsing'; accordionCollapse.style.height = '100%'; setTimeout(() => accordionCollapse.className = 'accordion-collapse collapse show', 350); accordionCollapse.parentElement.querySelector('.accordion-button').className = 'accordion-button'; }); }); accordionCollapse.addEventListener('hide.bs.collapse', (event) => { accordionCollapses.forEach((accordionCollapse) => { accordionCollapse.className = 'accordion-collapse collapsing'; accordionCollapse.className = 'accordion-collapse collapse'; accordionCollapse.parentElement.querySelector('.accordion-button').className = 'accordion-button collapsed'; }); }); });
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <body> <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"> Less content </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. <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. <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> <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> </body> </html>
多個手風琴同時打開。 如何一次只打開 1 個 JQuery 手風琴
[英]Multiple accordions simultaneously open. How to open only 1 JQuery accordion at a time
有沒有辦法使用@click (v-on:click) 打開一個模式，同時關閉第二個（已經打開？）
[英]Is there a way to use @click (v-on:click) to open one modal, while simultaneously closing a second one (that is already open?)
如何在同時關閉一個已經打開的彈出窗口的同時打開一個彈出窗口
[英]How to open a popover while closing an already open popover at the same time
修改 Twitter Bootstrap collapse 插件保持手風琴打開
[英]Modify Twitter Bootstrap collapse plugin to keep accordions open
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.