如何使用拆分按钮创建可折叠的内容？ (HTML/CSS/JS)答案

【问题标题】：How to create collapsible content with split button? (HTML/CSS/JS)如何使用拆分按钮创建可折叠的内容？ (HTML/CSS/JS)
【发布时间】：2020-03-03 12:01:30
【问题描述】：

如果有两列（左侧表示名称；右侧提供折叠功能（一个按钮）），您将如何在下一行创建全宽（覆盖两列）的可折叠内容？

我只能在某个列内折叠。我试图通过创建一个新的 div 来折叠下面的一行，但是折叠动作似乎不再起作用。

It should look like this:

感谢您的帮助！

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>

【问题讨论】：

标签： javascript html css

【解决方案1】：

您的 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】：

你需要这样吗？

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>

【讨论】：