使用HTML,JS和CSS只需点击一个下拉面板 [英] Have only one drop down panel open on click using HTML, JS, and CSS
问题描述
我有一个固定在我正在尝试构建的网页左侧的链接的下拉菜单列表。我在W3学校获得了HTML和CSS 这里的结构,但适合我的网页。我喜欢它的出现方式,因为它是打开面板以显示链接的平滑过渡,但是因为它是固定的,如果所有下拉面板均打开,则无法向下滚动屏幕以查看。我原本希望如果它变得太长,就会滚动它,但我宁愿拥有它,一次只能打开一个下拉面板。我希望像这里的功能,我仍然保持平稳过渡开闭面板。我还在学习,所以我不知道如何修改代码来做我想做的事情,所以我希望有人能帮助我。我想坚持只用HTML,JS和CSS。以下是我在页面中使用的核心部分。
I have a drop down menu list of links fixed on the left side of a web page I'm trying to build. I got the structure of the HTML and CSS here on w3 schools, but fit it to my page. I like the way it came out because it's a smooth transition of opening the panel to show the links, however because it's fixed, if all the drop down panels are open you can't scroll down the screen to see. I originally wanted to have it scroll if it became too long, but I would much rather have it where only one drop down panel is open at a time. I would like that functionality like here where I still keep the smooth transition of opening and closing panels. I'm still learning, so I don't know how to modify the code to do what I want so I was hoping someone can help me. I would like to stick with just HTML, JS, and CSS. Here's the core pieces I'm using in my page.
CSS
ul {position: fixed;}
li {
text-align: left;
display: block;
text-decoration: none;
}
li.drop-down {
cursor: pointer;
transition: 0s;
}
div.drop-down-panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-out;
}
a.panel {
text-align: left;
display: block;
text-decoration: none;
}
HTML
<ul>
<li class="drop-down">Header 1</li>
<div class="drop-down-panel">
<a class="panel" href="#link1">Link 1</a>
<a class="panel" href="#link2">Link 2</a>
</div>
<li class="drop-down">Header 2</li>
<div class="drop-down-panel">
<a class="panel" href="#link3">Link 3</a>
</div>
<li class="drop-down">Header 3</li>
<div class="drop-down-panel">
<a class="panel" href="#link4">Link 4</a>
<a class="panel" href="#link5">Link 5</a>
</div>
</ul>
JS
var acc = document.getElementsByClassName("drop-down");
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
推荐答案
希望这有助于:
Hope this helps:
<script>
var acc = document.getElementsByClassName("drop-down");
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var panel = this.nextElementSibling;
var maxHeight = panel.style.maxHeight;
//Collapse all divs first
var divs = document.getElementsByClassName("drop-down-panel");
for (i = 0; i < divs.length; i++) {
divs[i].style.maxHeight = null;
};
if (maxHeight)
panel.style.maxHeight = null;
else
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
</script>
基于来自@Mr的评论更新了代码。 Bungle
Updated code based on comment from @Mr. Bungle
<script type="text/javascript">
var acc = document.getElementsByClassName("drop-down");
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var panel = this.nextElementSibling;
var maxHeight = panel.style.maxHeight;
//Collapse all divs first
var divs = document.getElementsByClassName("drop-down-panel");
for (i = 0; i < divs.length; i++) {
divs[i].style.maxHeight = null;
divs[i].previousElementSibling.classList.remove("active"); //new code to remove "active" class for all headers (li tags)
};
this.classList.toggle("active"); //Moved this line from top
if (maxHeight)
{
panel.style.maxHeight = null;
this.classList.remove("active"); //Added this line to remove "active" class for the current header
}
else
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
</script>
这篇关于使用HTML,JS和CSS只需点击一个下拉面板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!