单击“更多”按钮时停止手风琴展开
[英]Stop accordion from expanding when More button is clicked
问题描述
When the More button is clicked, it should NOT expand and collapse.
单击“更多”按钮时，它不应展开和折叠。
If the accordion initial state is open, it must stay open even if button is clicked, if initial state is collapsed then after the more button the accordion should not expand.如果手风琴初始 state 打开，即使单击按钮它也必须保持打开状态，如果初始 state 折叠，则在更多按钮之后手风琴不应展开。
This means clicking the more button should not have any effect on the accordion.这意味着单击更多按钮不应该对手风琴有任何影响。
<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
Your code is not working because you have a button that triggers the accordion and inside that button you have your div "More".您的代码不起作用，因为您有一个触发手风琴的按钮，并且在该按钮内您有div “更多”。 So when you click the "More" it also triggers the accordion.因此，当您单击“更多”时，它也会触发手风琴。 You need to put your "More" button outside the first accordion button.您需要将“更多”按钮放在第一个手风琴按钮之外。
Also add this .accordion-button.collapsed + div#abc to your CSS at line 6.还要将此.accordion-button.collapsed + div#abc添加到第 6 行的 CSS。
Something like this:是这样的：
$(".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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Bootstrap手风琴在单击时未扩展 - Bootstrap accordion is not expanding when clicked
使用 React 的 useState 单击时单击的手风琴未展开 - Clicked accordion not expanding when clicked with React's useState
单击标题中的按钮时如何防止手风琴切换？ - How to prevent accordion from toggling when button in header is clicked?
仅在单击按钮时扩展行 - Expanding rows only when button clicked
单击按钮时仅展开一行 - Expanding only one row when button clicked
单击复选框时如何停止关闭可折叠的手风琴 - How can I stop the accordion(collapsible) from closing when checkboxes are clicked
单击按钮时如何停止其他功能的运行？ - How to stop other functions from running when a button is clicked?
单击子链接时如何停止垂直菜单的手风琴？ - How to stop accordion of vertical menu when child link is clicked.?
手风琴菜单 - 单击一个按钮时如何停止所有按钮打开？ - Accordion menu - how to stop all buttons opening when one is clicked?
Bootstrap手风琴在扩展时会跳 - Bootstrap accordion jumps when expanding
相关标签