问题描述
我正在尝试制作一个滑动的手风琴菜单,但是当我点击旨在触发它的按钮时,什么也没有发生。
这是我的代码...
另外,如果我的代码通常很草率,我很抱歉,我对此很陌生,并且非常愿意接受更好的实践建议!
提前致谢。
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";
}
});
}
.nav {
padding: 18px;
grid-column: 1/2;
grid-row: 1/2;
font-family: Consolas,"AnDale Mono","Lucida Console","Lucida Sans Typewriter",Monaco,"Courier New","monospace";
font-size: 20px;
color: black;
text-decoration: none;
}
.nav a {
transition: 0.4s;
}
.nav a:hover {
color: #FFB52A;
font-style: italic;
padding: 10px;
transition: 0.2s;
}
button {
background: none!important;
border: none;
padding: 0!important;
text-decoration: none;
cursor: pointer;
}
.accordion {
font-family: Consolas,"monospace";
font-size: 20px;
cursor: pointer;
padding: 18px;
transition: 0.4s;
}
.active,.accordion:hover {
color: #FFB52A;
font-style: italic;
padding: 10px;
transition: 0.2s;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="nav">
<h1>header</h1>
<button class="accordion">music</button><br>
<div class="panel">
<a href="artists.html">artists</a><br>
<a href="draw-and-listen.html">draw and listen</a><br>
</div>
<hr><br>
<button class="accordion">visual</button><br>
<div class="panel">
<a href="work.html">work</a><br>
</div>
<hr><br>
<a href="store.html">store</a><br>
<a href="about.html">about</a>
</div>
解决方法
在您的代码中,您正在寻找要显示/隐藏的按钮后面的元素,但这是一个 <br>
而不是带有内容的 <div>
。
在下面的示例中,我只是删除了 <br>
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";
}
});
}
.nav {
padding: 18px;
grid-column: 1/2;
grid-row: 1/2;
font-family: Consolas,"Andale Mono","Lucida Console","Lucida Sans Typewriter",Monaco,"Courier New","monospace";
font-size: 20px;
color: black;
text-decoration: none;
}
.nav a {
transition: 0.4s;
}
.nav a:hover {
color: #FFB52A;
font-style: italic;
padding: 10px;
transition: 0.2s;
}
button {
background: none!important;
border: none;
padding: 0!important;
text-decoration: none;
cursor: pointer;
}
.accordion {
font-family: Consolas,"monospace";
font-size: 20px;
cursor: pointer;
padding: 18px;
transition: 0.4s;
}
.active,.accordion:hover {
color: #FFB52A;
font-style: italic;
padding: 10px;
transition: 0.2s;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<div class="nav">
<h1>header</h1>
<button class="accordion">music</button>
<div class="panel">
<a href="artists.html">artists</a><br>
<a href="draw-and-listen.html">draw and listen</a><br>
</div>
<hr><br>
<button class="accordion">visual</button>
<div class="panel">
<a href="work.html">work</a><br>
</div>
<hr><br>
<a href="store.html">store</a><br>
<a href="about.html">about</a>
</div>