如何使用拆分按鈕創建可折疊內容？ (HTML/CSS/JS)
[英]How to create collapsible content with split button? (HTML/CSS/JS)
問題描述
有兩列（左邊表示名稱；右邊提供折疊功能（一個按鈕）），你將如何在下一行創建可折疊的全寬內容（覆蓋兩列）？
我只能在某個列內折疊。 我試圖通過創建一個新的 div 來折疊下面的一行，但是折疊操作似乎不再起作用。
感謝您的幫助！
JavaScript 來自： https : //www.w3schools.com/howto/howto_js_collapsible.asp
var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight){ content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); }
:root { --colorbggray: rgb(65,65,65); --colorlightgray: rgb(150,150,150); --colorcyan: rgb(0, 229, 255); --colorgreen: rgb(0, 255, 0); --colorUpGrey: rgb(135,135,135); --colorLowGrey: rgb(38,38,38); --colorMidGrey: rgb(95,95,95); --colorGreen: rgb(11,69,2); --colorAmber: orange; --colorRed: red; } .verticalmenu-auto { display: flex; align-items: stretch; background-color: #f1f1f1; } .verticalmenu-auto > div { border-top: 2px solid var(--colorUpGrey); border-bottom: 2px solid var(--colorLowGrey); border-left: 2px solid var(--colorUpGrey); border-right: 2px solid var(--colorLowGrey); background: var(--colorMidGrey); color: white; width: 100px; padding-top: 8px; padding-bottom: 8px; padding-right: 16px; padding-left: 16px; margin: 0.5px; text-align: left; font-size: 16px; } .verticalmenu-auto li, { border-top: 2px solidauto var(--colorUpGrey); border-bottom: 2px solid var(--colorLowGrey); border-left: 2px solid var(--colorUpGrey); border-right: 2px solid var(--colorLowGrey); background: var(--colorMidGrey); } .collapsible { background: var(--colorMidGrey); color: white; cursor: pointer; width: 100%; border: none; text-align: center; outline: none; } .collapsible:after { content: '\\1433'; float: center; transform: scale(.7, 1); } .active:after { content: "\\142F"; transform: scale(1, .7); } .content { max-height: 0; overflow: hidden; transition: max-height 0.0s ease-out; grid-column-start: -1; grid-column-end: 1; background-color: gray; }
<body> <p>On right side open content which is has the width of both columns combined</p> <ul style="list-style:none;padding-left:0;"> <li> <div class="verticalmenu-auto"> <div style="flex-grow: 10">Name</div> <div style="flex-grow: 1; text-align: center"> <button class="collapsible"></button> <div class='content'> <p> content</p> </div> </div> </div> </li> <li> <div class="verticalmenu-auto"> <div style="flex-grow: 10">Name</div> <div style="flex-grow: 1; text-align: center"> <button class="collapsible"></button> <div class='content'> <p> content</p> </div> </div> </div> </li>
2 個解決方案
解決方案1
1 已采納 2020-03-03 12:52:28
您的 JS 切換略有變化，並將內容放在父 div 之外，使其充當block
$(document).ready(function () { $('.collapsible').on('click', function(event){ event.preventDefault(); // create accordion variables var accordion = $(this); var accordionContent = accordion.closest('.verticalmenu-auto').next('.content'); // toggle accordion link open class accordion.toggleClass("active"); // toggle accordion content accordionContent.slideToggle(250); accordionContent.toggleClass("active"); }); });
:root { --colorbggray: rgb(65,65,65); --colorlightgray: rgb(150,150,150); --colorcyan: rgb(0, 229, 255); --colorgreen: rgb(0, 255, 0); --colorUpGrey: rgb(135,135,135); --colorLowGrey: rgb(38,38,38); --colorMidGrey: rgb(95,95,95); --colorGreen: rgb(11,69,2); --colorAmber: orange; --colorRed: red; } .verticalmenu-auto { display: flex; align-items: stretch; background-color: #f1f1f1; } .verticalmenu-auto > div { border-top: 2px solid var(--colorUpGrey); border-bottom: 2px solid var(--colorLowGrey); border-left: 2px solid var(--colorUpGrey); border-right: 2px solid var(--colorLowGrey); background: var(--colorMidGrey); color: white; width: 100px; padding-top: 8px; padding-bottom: 8px; padding-right: 16px; padding-left: 16px; margin: 0.5px; text-align: left; font-size: 16px; } .verticalmenu-auto li, { border-top: 2px solidauto var(--colorUpGrey); border-bottom: 2px solid var(--colorLowGrey); border-left: 2px solid var(--colorUpGrey); border-right: 2px solid var(--colorLowGrey); background: var(--colorMidGrey); } .collapsible { background: var(--colorMidGrey); color: white; cursor: pointer; width: 100%; border: none; text-align: center; outline: none; } .collapsible:after { content: '\\1433'; float: center; transform: scale(.7, 1); } .collapsible.active:after { content: "\\142F"; transform: scale(1, .7); } .content { display: none; overflow: hidden; transition: max-height 0.0s ease-out; grid-column-start: -1; grid-column-end: 1; background-color: #BFBFBF; padding: 10px; color: #fff; } .content.active { height: auto; display: block !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <p>On right side open content which is has the width of both columns combined</p> <ul style="list-style:none;padding-left:0;"> <li> <div class="verticalmenu-auto"> <div style="flex-grow: 10">Name</div> <div style="flex-grow: 1; text-align: center"> <button class="collapsible"></button> </div> </div> <div class='content'> <p> content</p> </div> </li> <li> <div class="verticalmenu-auto"> <div style="flex-grow: 10">Name</div> <div style="flex-grow: 1; text-align: center"> <button class="collapsible"></button> </div> </div> <div class='content'> <p> content</p> </div> </li>
解決方案2
0 2020-03-03 12:39:35
你需要這樣嗎？
var buttons = document.querySelectorAll('.toggle'); buttons.forEach(function(el) { el.addEventListener('click', function(event) { var target = event.target.getAttribute('target'); document.getElementById(target).classList.toggle('expanded'); }); });
table { width: 100%; } table td:nth-child(2) { width: 100px; } .row-detail { display: none; } .expanded { display: block; }
<table> <tr> <td>Row 1</td> <td><button class="toggle" target="row-detail-1">Toggle 1</button></td> </tr> <tr id="row-detail-1" class="row-detail"> <td colspan="2">This detail from row 1</td> </tr> <tr> <td>Row 2</td> <td><button class="toggle" target="row-detail-2">Toggle 2</button></td> </tr> <tr id="row-detail-2" class="row-detail"> <td colspan="2">This detail from row 2</td> </tr> <tr> <td>Row 3</td> <td><button class="toggle" target="row-detail-3">Toggle 3</button></td> </tr> <tr id="row-detail-3" class="row-detail"> <td colspan="2">This detail from row 3</td> </tr> </table>
使用 CSS 和 JS 的 HTML 可折疊表格部分
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.