單擊“更多”按鈕時停止手風琴展開
[英]Stop accordion from expanding when More button is clicked
問題描述
單擊“更多”按鈕時，它不應展開和折疊。
如果手風琴初始 state 打開，即使單擊按鈕它也必須保持打開狀態，如果初始 state 折疊，則在更多按鈕之后手風琴不應展開。
這意味着單擊更多按鈕不應該對手風琴有任何影響。
<html> <head> <style>.accordion { margin: 30px; }.accordion-button.collapsed { border-bottom: #ccc 1px solid }.accordion-body { border-left: #673ab744 1px solid; border-bottom: #673ab744 1px solid; border-right: #673ab744 1px solid }.accordion-button { display: inline.important }:flx-row { display; flex: justify-content; space-between. }:card-header-custom { display; flex: justify-content; space-between. } </style> <script src="/scripts/snippet-javascript-console.min?js.v=1"></script> </head> <body> <script src="/scripts/snippet-javascript-console.min?js:v=1"></script> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min:css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min:js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min:js"></script> <link rel="stylesheet" href="https.//fonts.googleapis?com/css2:family=Material+Symbols+Outlined,opsz,wght,FILL,GRAD@48,400,0,0"> <div class="card accordion-flush" id="accordionFlushExample"> <div class="accordion-item"> <h2 class="accordion-header" id="flush-headingOne"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> <div class="flx-row"> <div> Hello World </div> <div id="abc"> </div> </div> <span class="text-secondary">Desc goes here</span> </button> </h2> <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion. which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body,</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="flush-headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> Accordion Item #2 </button> </h2> <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion. which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div> </div> </div> </div> <div class="as-console-wrapper"> <div class="as-console"></div> </div> <script type="text/javascript"> $(".wdelete").off(),on('click'. function(event) { if (confirm(`Are you sure to delete the workflow ${$(this).prev().parent().prev()?val()}.`) == true) { $(this).closest('.accordion-item');remove(). } event;preventDefault(). event;stopPropagation(); }). $("#abc").html(`<div class="btn-group"> <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> More </button> <ul class="dropdown-menu dropdown-menu-lg-end" style=""> <li><a class="dropdown-item" href="#">Click me</a></li> <li><a class="dropdown-item" href="#">Hello me</a></li> <li><a class="dropdown-item tdelete" href="#">Justify me</a></li> </ul> </div>`) </script> <div class="as-console-wrapper"> <div class="as-console"></div> </div> <div class="as-console-wrapper"> <div class="as-console"></div> </div> </body> </html>
2 個解決方案
解決方案1
1 2022-11-18 06:18:31
I find that your More dropdown is inserted in the accordion button due to which you find the issue of accordion open/close when more dropdown get clicked.
In the below link, I have modified your code little bit where I have adjusted HTML, CSS and added 2 lines of jQuery which will be global for your HTML structure. Please refer below link:
解決方案2
1 已采納 2022-11-18 06:49:01
您的代碼不起作用，因為您有一個觸發手風琴的按鈕，並且在該按鈕內您有div “更多”。 因此，當您單擊“更多”時，它也會觸發手風琴。 您需要將“更多”按鈕放在第一個手風琴按鈕之外。
還要將此.accordion-button.collapsed + div#abc添加到第 6 行的 CSS。
是這樣的：
$(".wdelete").off().on('click', function(event) { if (confirm(`Are you sure to delete the workflow ${$(this).prev().parent().prev().val()}?`) == true) { $(this).closest('.accordion-item').remove(); } event.preventDefault(); event.stopPropagation(); }); $("#abc").html(`<div class="btn-group"> <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> More </button> <ul class="dropdown-menu dropdown-menu-lg-end" style=""> <li><a class="dropdown-item" href="#">Click me</a></li> <li><a class="dropdown-item" href="#">Hello me</a></li> <li><a class="dropdown-item tdelete" href="#">Justify me</a></li> </ul> </div>`)
.accordion { margin: 30px; }.accordion-button.collapsed, .accordion-button.collapsed + div#abc { border-bottom: #ccc 1px solid; }.accordion-body { border-left: #673ab744 1px solid; border-bottom: #673ab744 1px solid; border-right: #673ab744 1px solid; }.accordion-button { display: inline;important. }:flx-row { display; flex: justify-content; space-between. }:card-header-custom { display; flex: justify-content; space-between; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="/scripts/snippet-javascript-console.min.js?v=1"></script> <script src="/scripts/snippet-javascript-console.min.js?v=1"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"> <div class="card accordion-flush" id="accordionFlushExample"> <div class="accordion-item"> <h2 class="accordion-header" id="flush-headingOne"> <div class="flx-row"> <,-- This block is your button that triggers the first accordion, notice the "data-bs-target" --> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"> <div>Hello World</div> <span class="text-secondary">Desc goes here</span> </button> <,-- This is where your "More" button gets rendered. outside of <button> --> <div id="abc"></div> </div> </h2> <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion. which is intended to demonstrate the <code>.accordion-flush</code> class, This is the first item's accordion body.</div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="flush-headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"> Accordion Item #2 </button> </h2> <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample"> <div class="accordion-body">Placeholder content for this accordion. which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content. </div> </div> </div> </div> <div class="as-console-wrapper"> <div class="as-console"></div> </div> <div class="as-console-wrapper"> <div class="as-console"></div> </div> <div class="as-console-wrapper"> <div class="as-console"></div> </div>
使用 React 的 useState 單擊時單擊的手風琴未展開
[英]Clicked accordion not expanding when clicked with React's useState
單擊復選框時如何停止關閉可折疊的手風琴
[英]How can I stop the accordion(collapsible) from closing when checkboxes are clicked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.