- 首页
- 前端开发
- Vanilla Javascript 手风琴功能
Vanilla Javascript 手风琴功能
[英] Vanilla Javascript Accordion Functionality
本文介绍了Vanilla Javascript 手风琴功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在打开其他面板的点击后需要帮助关闭其他面板.过去一周我一直试图解决这个问题，但我就是做不到.
我不想使用 jquery 库，我希望能够直接将此代码编码到我的网站中.
我认为所需的 javascript 代码在概念上很简单，但对于像我这样的人来说很难编写.我仍然不完全理解 javascript 命令、函数等是如何工作的.
非常感谢任何帮助或指导！
这是我的代码:
HTML
<头><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="accordion.css"><身体><h3 class="accordion">帆船基础</h3><div class="面板"><div class="col col-4 middle"><!-- <div class="space"></div>--><h4>在选择帆船之前</h4><p>在寻找要购买的船之前，您首先需要知道您想用这艘船做什么，是去度假、学习如何航行、比赛还是休闲航行.</p>
<div class="col col-4 middle"><!-- <div class="space"></div>--><h4>车顶&尾随</h4><p>将船倒置是一种很好的做法，这样可以让船舷靠在车顶架的一侧，并防止船体受损.</p>
<div class="col col-4 middle"><!-- <div class="space"></div>--><h4>安全设备</h4><p>您必须始终考虑:安全第一.航行是危险的，如果不采取适当的预防措施，可能会导致重伤或死亡.</p>
<h3 class="accordion">帆船基础</h3><div class="面板"><div class="col col-4 middle"><!-- <div class="space"></div>--><h4>在选择帆船之前</h4><p>在寻找要购买的船之前，您首先需要知道您想用这艘船做什么，是去度假、学习如何航行、比赛还是休闲航行.</p>
<div class="col col-4 middle"><!-- <div class="space"></div>--><h4>车顶&尾随</h4><p>将船倒置是一种很好的做法，这样可以让船舷靠在车顶架的一侧，并防止船体受损.</p>
<div class="col col-4 middle"><!-- <div class="space"></div>--><h4>安全设备</h4><p>您必须始终考虑:安全第一.航行是危险的，如果不采取适当的预防措施，可能会导致重伤或死亡.</p>
<script src="accordion.js"></script></html>
CSS
.accordion {背景色:#2364aa；颜色:#ffffff；光标:指针；填充:18px；边界:无；文本对齐:左；大纲:无；字体大小:21px；过渡:0.4s；}.open, .accordion:hover {背景色:#205A99；}.手风琴:在{之后内容:'\f067';font-family: "Font Awesome 5 Free";颜色:#ffffff；浮动:对；字体大小:1.25em；行高:25px；}.打开:{内容:\2212"；}.控制板 {最大高度:0；溢出:隐藏；过渡:0.2s 缓出；}.面板主体{填充:18px 0;}@media only screen and (min-width: 960px) {.容器 {显示:表；box-sizing: 边框框；}.row .col {边距:10px 0;}.col{显示:表格单元格；}.col.middle {垂直对齐:中间；}.col-2 {宽度:50%；右填充:72px；}.col-4 {宽度:33.33333333333333333%；右填充:72px；}}
Javascript
var acc = document.getElementsByClassName("accordion");变量 i;for (i = 0; i < acc.length; i++) {acc[i].addEventListener("点击", function() {this.classList.toggle("active");var panel = this.nextElementSibling;如果(panel.style.maxHeight){panel.style.maxHeight = null;} 别的 {panel.style.maxHeight = panel.scrollHeight + "px";}});}
解决方案
希望这个功能对你有帮助
function closeAll() {var accs = document.querySelectorAll('.accordion');for(var i = 0; i < accs.length; i ++) {accs[i].classList.remove('active');var panel = accs[i].nextElementSibling;panel.style.maxHeight = null;}}
更新 我们可以通过将这个条件添加到 closeAll 函数来跳过关闭被点击的元素:
if (accs[i] == tar) {继续;}
完整代码在这里
var acc = document.getElementsByClassName("accordion");变量 i;for (i = 0; i < acc.length; i++) {acc[i].addEventListener("click", function(ev) {closeAll(ev.target);this.classList.toggle("active");var panel = this.nextElementSibling;如果(panel.style.maxHeight){panel.style.maxHeight = null;} 别的 {panel.style.maxHeight = panel.scrollHeight + "px";}});}函数 closeAll(tar) {var accs = document.querySelectorAll('.accordion');for (var i = 0; i < accs.length; i++) {如果(accs[i] == tar){继续;}accs[i].classList.remove('active');var panel = accs[i].nextElementSibling;panel.style.maxHeight = null;}}
.accordion {背景色:#2364aa；颜色:#ffffff；光标:指针；填充:18px；边界:无；文本对齐:左；大纲:无；字体大小:21px；过渡:0.4s；}.打开，.手风琴:悬停{背景色:#205A99；}.手风琴:在{之后内容:'\f067';font-family: "Font Awesome 5 Free";颜色:#ffffff；浮动:对；字体大小:1.25em；行高:25px；}.打开:{内容:\2212"；}.控制板 {最大高度:0；溢出:隐藏；过渡:0.2s 缓出；}.面板主体{填充:18px 0;}@media only screen and (min-width: 960px) {.容器 {显示:表；box-sizing: 边框框；}.row .col {边距:10px 0;}.col{显示:表格单元格；}.col.middle {垂直对齐:中间；}.col-2 {宽度:50%；右填充:72px；}.col-4 {宽度:33.333333333333333333%；右填充:72px；}}
<头><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="accordion.css"><身体><h3 class="accordion">帆船基础</h3><div class="面板"><div class="col col-4 middle"><!-- <div class="space"></div>--><h4>在选择帆船之前</h4><p>在寻找要购买的船之前，您首先需要知道您想用这艘船做什么，是去度假、学习如何航行、比赛还是休闲航行.</p>
<div class="col col-4 middle"><!-- <div class="space"></div>--><h4>车顶&尾随</h4><p>将船倒置是一种很好的做法，这样可以让船舷靠在车顶架的一侧，并防止船体受损.</p>
<div class="col col-4 middle"><!-- <div class="space"></div>--><h4>安全设备</h4><p>您必须始终考虑:安全第一.航行是危险的，如果不采取适当的预防措施，可能会导致重伤或死亡.</p>
<h3 class="accordion">帆船基础</h3><div class="面板"><div class="col col-4 middle"><!-- <div class="space"></div>--><h4>在选择帆船之前</h4><p>在寻找要购买的船之前，您首先需要知道您想用这艘船做什么，是去度假、学习如何航行、比赛还是休闲航行.</p>
<div class="col col-4 middle"><!-- <div class="space"></div>--><h4>车顶&尾随</h4><p>将船倒置是一种很好的做法，这样可以让船舷靠在车顶架的一侧，并防止船体受损.</p>
<div class="col col-4 middle"><!-- <div class="space"></div>--><h4>安全设备</h4><p>您必须始终考虑:安全第一.航行是危险的，如果不采取适当的预防措施，可能会导致重伤或死亡.</p>
<script src="accordion.js"></script></html>
I need help with closing other panels once I open a click on a different panel. I have been trying to get my head around it for the past week but I'm just not able to.
I don't want to use a jquery library, I want to be able to code this code directly into my website.
I think the javascript code needed is simple in concept but hard to write for someone like me. I still don't exactly understand how javascript commands, functions, etc. work.
Any help or guidance is greatly appreciated!
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="accordion.css">
</head>
<body>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<script src="accordion.js"></script>
</body>
</html>
CSS
.accordion {
background-color: #2364aa;
color: #ffffff;
cursor: pointer;
padding: 18px;
border: none;
text-align: left;
outline: none;
font-size: 21px;
transition: 0.4s;
}
.open, .accordion:hover {
background-color: #205A99;
}
.accordion:after {
content: '\f067';
font-family: "Font Awesome 5 Free";
color: #ffffff;
float: right;
font-size: 1.25em;
line-height: 25px;
}
.open:after {
content: "\2212";
}
.panel {
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel-body {
padding: 18px 0;
}
@media only screen and (min-width: 960px) {
.container {
display: table;
box-sizing: border-box;
}
.row .col {
margin: 10px 0;
}
.col {
display: table-cell;
}
.col.middle {
vertical-align: middle;
}
.col-2 {
width: 50%;
padding-right: 72px;
}
.col-4 {
width: 33.33333333333333333%;
padding-right: 72px;
}
}
Javascript
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";
}
});
}
解决方案
I hope this function helps you
function closeAll() {
var accs = document.querySelectorAll('.accordion');
for(var i = 0; i < accs.length; i ++) {
accs[i].classList.remove('active');
var panel = accs[i].nextElementSibling;
panel.style.maxHeight = null;
}
}
Update We can skip closing clicked element by adding this condition to closeAll function:
if (accs[i] == tar) {
continue;
}
Full code here
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function(ev) {
closeAll(ev.target);
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
function closeAll(tar) {
var accs = document.querySelectorAll('.accordion');
for (var i = 0; i < accs.length; i++) {
if (accs[i] == tar) {
continue;
}
accs[i].classList.remove('active');
var panel = accs[i].nextElementSibling;
panel.style.maxHeight = null;
}
}
.accordion {
background-color: #2364aa;
color: #ffffff;
cursor: pointer;
padding: 18px;
border: none;
text-align: left;
outline: none;
font-size: 21px;
transition: 0.4s;
}
.open,
.accordion:hover {
background-color: #205A99;
}
.accordion:after {
content: '\f067';
font-family: "Font Awesome 5 Free";
color: #ffffff;
float: right;
font-size: 1.25em;
line-height: 25px;
}
.open:after {
content: "\2212";
}
.panel {
max-height: 0;
overflow: hidden;
transition: 0.2s ease-out;
}
.panel-body {
padding: 18px 0;
}
@media only screen and (min-width: 960px) {
.container {
display: table;
box-sizing: border-box;
}
.row .col {
margin: 10px 0;
}
.col {
display: table-cell;
}
.col.middle {
vertical-align: middle;
}
.col-2 {
width: 50%;
padding-right: 72px;
}
.col-4 {
width: 33.33333333333333333%;
padding-right: 72px;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="accordion.css">
</head>
<body>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<h3 class="accordion">Basics of Sailing</h3>
<div class="panel">
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Before Choosing a Sailboat</h4>
<p>Before looking for a boat to buy, you need to first know what you want to do with the boat, whether that is to go on vacation, learn how to sail, competitions or recreational sailing.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Car Topping & Trailing</h4>
<p>It's a good practice to carry the boat upside-down to allow the sides to rest on the side of the roof racks and to prevent the hull from getting damaged.</p>
</div>
<div class="col col-4 middle">
<!-- <div class="space"></div> -->
<h4>Safety Equipment</h4>
<p>You have to always have to think: safety first. Sailing is a dangerous and could result in severe injuries or death if the proper precautions are not taken.</p>
</div>
</div>
<script src="accordion.js"></script>
</body>
</html>
这篇关于Vanilla Javascript 手风琴功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
