这个JavaScript手风琴代码有什么问题?

var btn = document.querySelector('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");
var i;
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
var otherPanels = document.querySelectorAll("section > div:not(.active)");
panel.classList.add('.active');
otherPanels.classList.add('.hidden');
}
});
};

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.btn {
color: white;
background-color: brown;
cursor: pointer;
}
.panel {
display: none;
}
.active {
display: block;
}
.hidden {
display: none;
}

<body>
<section id="accordion">
<h3 class="btn">button1</h3>
<div class="panel">panel1</div>
<h3 class="btn">button2</h3>
<div class="panel">panel2</div>
<h3 class="btn">button3</h3>
<div class="panel">panel3</div>
<h3 class="btn">button4</h3>
<div class="panel">panel4</div>
</section>
</body>

你好

请我正在尝试编写JavaScript手风琴，但我的代码不起作用

我想做的是当我单击按钮时，它仅通过仅将活动类添加到此面板并同时将隐藏类添加到所有其他面板来显示其面板

所以当我点击按钮时，它会上下滑动

并且只显示一个面板，然后当我单击其他按钮时，它会向下滑动自己的面板并自动向上滑动另一个面板

请提前提供帮助和非常感谢

添加到已经提到语法错误和其他修复的人。您不需要任何循环、数组处理(如 forEach 等(，也不需要每个按钮的许多事件侦听器。这是简单明了的解决方案，其中包含事件侦听器部分：

let section = document.querySelector('#accordion');
section.addEventListener("click", function(event) {
if(!event.target.classList.contains('btn')) return;
let activePanel = section.querySelector('.active');
let clickedPanel = event.target.nextElementSibling;
clickedPanel.classList.add('active');
activePanel && activePanel.classList.remove('active');
});

没有循环，只有一个事件侦听器，并且您只使用一个当前元素和一个以前处于活动状态的元素(如果有的话(！

希望对你有帮助

将 JavaScript 代码更改为以下内容：

var btn = document.querySelectorAll('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");
var i;
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
var otherPanels = document.querySelectorAll("section > div");
otherPanels.forEach(function (panel) {
panel.classList.remove('hidden');
panel.classList.remove('active');
});

var panel = this.nextElementSibling;
console.log(panel);
panel.classList.add('active');
var otherPanels = document.querySelectorAll("section > div:not(.active)");
otherPanels.forEach(function (panel) {
panel.classList.add('hidden');
});
});
}

在这里代码： https://codepen.io/v08i/pen/RwNBJKN

var btn = document.querySelectorAll('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");
var i;
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
var otherPanels = document.querySelectorAll("section > div.active");
otherPanels.forEach((item) => {item.classList.remove('active');})
panel.classList.add('active');

}
);
};

不要使用隐藏类，因为你已经在.panel类中添加了"display:none"，所以你只需要删除并添加active类

var btn = document.querySelectorAll('.btn');
var activePanel = document.querySelector('.active');
var hiddenPanel = document.querySelectorAll("section > div:not(.active)");
var i;
for (i = 0; i < btn.length; i++) {
btn[i].addEventListener("click", function() {
var panel = this.nextElementSibling;
if (panel.classList.contains('active')) {
panel.classList.remove('active');
panel.classList.add('hidden');
} else {
var otherPanels = Array.from(document.querySelectorAll("section > div"));
otherPanels.forEach(p => p.classList.add('hidden'));
panel.classList.remove('hidden');
panel.classList.add('active');
}
}
);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.btn {
color: white;
background-color: brown;
cursor: pointer;
}
.panel {
display: none;
}
.active {
display: block;
}
.hidden {
display: none;
}

<body>
<section id="accordion">
<h3 class="btn">button1</h3>
<div class="panel">panel1</div>
<h3 class="btn">button2</h3>
<div class="panel">panel2</div>
<h3 class="btn">button3</h3>
<div class="panel">panel3</div>
<h3 class="btn">button4</h3>
<div class="panel">panel4</div>
</section>
</body>

相关内容

最新更新

热门标签：