我正在使用纯 JavaScript 创建 Accordion 。最初我只展示了第一部分的内容。然后通过使用 JavaScript，我在点击部分显示内容。
这很好用，但是当我点击 section1 时它不会隐藏，因为 active class 仍然存在。
<!DOCTYPE html>
<html>
<head>
<style>
.main {
background-color: #eee;
width:350px;
color: #444;
padding: 18px;
border: none;
text-align: left;
font-size: 15px;
}
.main.active,.main:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: white;
display:none;
width:350px;
}
.active{
display: block !important;
}
div.panel.show {
display: block;
}
div.panel.hide {
display: none;
}
</style>
</head>
<body>
<div class="main">Section 1</div>
<div class="panel active">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="main">Section 2</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="main">Section 3</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>
var acc = document.getElementsByClassName("main");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</body>
</html>
最佳答案
你可以尝试这样的事情:
逻辑:
- 检查当前点击的部分是打开还是关闭并保存。这将用于切换状态。
- 隐藏所有打开的部分。
- 如果当前部分可见，则什么都不做。如果没有，请展示。
function registerEvents() {
var sections = document.querySelectorAll(".main");
for (var i = 0; i < sections.length; i++) {
sections[i].addEventListener("click", toggleSection)
}
}
function toggleSection(e) {
var ele = e.target.nextElementSibling;
var isNotVisible = ele.className.indexOf("active") < 0;
hideAllPanels();
if (isNotVisible)
addClass(ele, "active");
}
function hideAllPanels() {
var panels = document.querySelectorAll(".panel.active");
for (var i = 0; i < panels.length; i++) {
panels[i].className = panels[i].className.replace("active", "");
}
}
function addClass(el, _class) {
el.className += " " + _class;
}
(function init() {
registerEvents();
})().main {
background-color: #eee;
width: 350px;
color: #444;
padding: 18px;
border: none;
text-align: left;
font-size: 15px;
}
.main.active,
.main:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
background-color: white;
display: none;
width: 350px;
}
.active {
display: block !important;
}
div.panel.show {
display: block;
}
div.panel.hide {
display: none;
}<div class="main">Section 1</div>
<div class="panel active">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="main">Section 2</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="main">Section 3</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>注意:我已经抽空更新了您的代码。
关于javascript - 如何使用 JavaScript 查找特定类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37829331/