试图有4个或5个主按钮的手风琴,当一个被单击时,其他应消失,因此所单击的按钮应是唯一显示的按钮。当最小化时,其他人应该重新出现以再次显示整个手风琴。
我认为这样的某种切换(我在网站的另一部分中有)可能适用?除了我应该隐藏多个手风琴按钮,而不仅仅是在隐藏/显示两个部分之间进行切换:
function myFunction()
{
var x = document.getElementById("text");
var y = document.getElementById("text2");
if (x.style.display === "none")
{
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
}
这是我当前拥有的代码,并且该脚本当前仅确保一次只显示一个手风琴面板:
<style>
p.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 14px;
width: 60%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
margin-bottom:10px;
margin: auto;
}
p.accordion.active, p.accordion:hover {
background-color: #ddd;
}
p.accordion:after {
content: '\2795';
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
p.accordion.active:after {
content: "\2796";
}
/* Style the element that is used for the panel class */
div.panel {
background-color: white;
max-height: 0;
width: 60%;
text-align: left;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
margin-bottom:10px;
margin: auto;
}
div.panel.show {
padding: 10pt;
opacity: 1;
max-height: 500px;
border: none;
}
</style>
<p class="accordion">PanelOne</p>
<div class="panel">
Lorem Ipsum
</div>
<p class="accordion">PanelTwo</p>
<div class="panel">
Lorem Ipsum II
</div>
<p class="accordion">PanelThree</p>
<div class="panel">
Lorem Ipsum III
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event)
{
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++)
{
acc[i].onclick = function()
{
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses)
{
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
}
function setClass(els, className, fnName)
{
for (var i = 0; i < els.length; i++)
{
els[i].classList[fnName](className);
}
}
});
</script>
任何提示/修复,将不胜感激!
许多可能的解决方案之一:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (let i = 0; i < acc.length; i += 1) {
acc[i].onclick = function () {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
for (let j = 0; j < acc.length; j += 1) {
if (i !== j) {
acc[j].style.display = acc[j].style.display === 'none' ? 'block' : 'none';
}
}
}
}
});
</script>