当前，我正在做一个项目，要求我做一个很大的形式。我不得不将其分成几个单独的部分，但我希望它们保留在一个站点上。因此，我选择了手风琴方法。我直接将其放置在表单中。我不得不进一步分割内容，所以我创建了一个嵌套在手风琴按钮之一中的TabPanels。这样IMHO看起来很整洁，但是...
似乎这些选项卡中的内容面板无法正确显示。我的猜测是它将面板的高度从默认打开的选项卡中取出，并在每个选项卡中使用它。其他选项卡具有更多内容，仅会导致溢出问题（其文字被删减）。要实现此功能，您必须在显示最大的内容选项卡时关闭手风琴。当您再次打开它时，所有内容都会像魅力一样起作用。从技术上讲，我可以交换默认打开的选项卡，但是在这种情况下是不可能的，这只是一种解决方法。
如果您能帮助我解决此问题，我将不胜感激。
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
}
else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
})
}
function Open(evt, Order) {
var i, tablinks, tabcontent;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" current", "");
}
document.getElementById(Order).style.display = "block";
evt.currentTarget.className += " current"; //add another className
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click(); body {
font-family: 'Barlow', sans-serif !important;
color: #000000;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
margin: auto;
display: block;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
text-align: center;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.current {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
justify-content: left;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
} <!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="TabsInAccordionInForm.css" hreflang="UTF-8" media="screen"/>
</head>
<body>
<form>
<button type="button" class="accordion">First</button> <!-- first accordion beginning -->
<div class="panel">
<div class="tab"> <!-- tab links -->
<button type="button" class="tablinks" id="defaultOpen" onclick="Open(event, 'Uno')">Uno</button>
<button type="button" class="tablinks" id="kp" onclick="Open(event, 'Dos')">Dos</button>
<button type="button" class="tablinks" id="p" onclick="Open(event, 'Tres')">Tres</button>
</div>
<div class="tabcontent" id="Uno"> <!-- first tab content beginning -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
</div> <!-- first tab content ending -->
<div class="tabcontent" id="Dos"> <!-- second tab content beginning -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
</div> <!-- second tab content ending -->
<div class="tabcontent" id="Tres"> <!-- third tab content beginning -->
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
</div> <!-- third tab content ending -->
</div> <!-- first accordion ending -->
<button type="button" class="accordion">Second</button> <!-- second accordion beginning -->
<div class="panel">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
</div> <!-- second accordion ending -->
<button type="button" class="accordion">Third</button> <!-- third accordion beginning -->
<div class="panel">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis nec urna at convallis.
Quisque a viverra arcu, vel fringilla libero. Nulla nec volutpat sapien. Suspendisse quis placerat diam,
sed suscipit dolor. Phasellus ullamcorper rutrum metus, a porttitor massa consequat vitae.
Curabitur bibendum mollis ex vel faucibus. Aliquam enim odio, dictum sit amet rutrum id, consequat ut diam.
Nullam porta metus vel lorem vulputate tempor. Nullam non ipsum quis magna posuere pharetra ut ut massa.
Ut laoreet, lorem vel tincidunt vestibulum, nisi urna venenatis libero, vitae porttitor leo nunc volutpat lacus.
Nam viverra ut libero scelerisque tempor. In risus nulla, facilisis eget mauris ac, luctus gravida ante.
Nunc vitae accumsan ligula, vitae imperdiet nibh.
</p>
</div> <!-- third accordion ending -->
</form>
<script type="text/javascript" src="TabsInAccordionInForm.js"></script>
</body>
</html>
下面是工作示例的链接：