英文:
Trying to get all accordions to open at once
问题
I'll provide translations for the code part:
// JavaScript code
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 = panel.scrollHeight + "px";
setTimeout(function(){panel.style.maxHeight = null;}, 50)
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
setTimeout(function(){panel.style.maxHeight = "unset";}, 200)
}
});
}
/* CSS code */
body {
font-family: Arial, Helvetica, Sans-serif;
background-color: MintCream;
border: thick solid;
border-radius: 20px;
border-width: thick;
border-collapse: collapse;
}
/* ... (other CSS styles) ... */
.accordion {
background-color: MintCream;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
}
/* ... (other CSS styles) ... */
.panel {
padding: 0 18px;
background-color: MintCream;
max-height: 0;
overflow: auto;
transition: max-height 0.2s ease-out;
}
<!-- HTML code -->
<html>
<head>
<title>Test Fixture Report, Controller CCA</title>
</head>
<body>
<h1 class="center" style="margin-top: 10px"> Test Fixture Report, Controller CCA</h1>
<table class="a" style="width:100%">
<!-- ... (table content) ... -->
</table>
<button class="accordion" style="background-color:?">Self Test</button>
<div class="panel">
?
</div>
<button class="accordion" style="background-color:?">CCA Test</button>
<div class="panel">
?
</div>
</body>
</html>
Note: I've retained the placeholders like "?" in the HTML because it's not clear what specific content you want to replace them with. You can replace "?" with your actual content as needed.
英文:
So currently I'm trying to get all of my accordions to open and close if I hit the ctrl key. If I hit ctrl key I want all of the accordions to open including the nested ones as well and if I hit ctrl again I want them all to close.
Here's my code that I've been using if I only have to change my java script that would be the best but if I have to change other parts of it I'd be fine with that.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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 = panel.scrollHeight + "px";
setTimeout(function(){panel.style.maxHeight = null;}, 50)
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
setTimeout(function(){panel.style.maxHeight = "unset";}, 200)
}
});
}
<!-- language: lang-css -->
body {
font-family: Arial, Helvetica, Sans-serif;
background-color: MintCream;
border: thick solid;
border-radius: 20px;
border-width: thick;
border-collapse: collapse;
}
.center {
text-align: center;
}
table {
margin-right: 50px;
margin-top: 10px;
border-collapse: collapse;
text-align: left;
}
th {
padding-bottom: 20px;
font-weight: bold;
font-size: 20px;
}
td {
border-bottom-style: solid;
border-width: 1px;
font-weight: bold;
}
table.a {
table-layout: fixed;
}
.accordion {
background-color: MintCream;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: 'body {
font-family: Arial, Helvetica, Sans-serif;
background-color: MintCream;
border: thick solid;
border-radius: 20px;
border-width: thick;
border-collapse: collapse;
}
.center {
text-align: center;
}
table {
margin-right: 50px;
margin-top: 10px;
border-collapse: collapse;
text-align: left;
}
th {
padding-bottom: 20px;
font-weight: bold;
font-size: 20px;
}
td {
border-bottom-style: solid;
border-width: 1px;
font-weight: bold;
}
table.a {
table-layout: fixed;
}
.accordion {
background-color: MintCream;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: MintCream;
max-height: 0;
overflow: auto;
transition: max-height 0.2s ease-out;
}
2B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "12";
}
.panel {
padding: 0 18px;
background-color: MintCream;
max-height: 0;
overflow: auto;
transition: max-height 0.2s ease-out;
}
<!-- language: lang-html -->
<html>
<head>
<title>Test Fixture Report, Controller CCA</title>
</head>
<body>
<h1 class = "center" style = "margin-top: 10px"> Test Fixture Report, Controller CCA</h1>
<table class = "a" style = "width:100%">
<tr>
<th><p style = "margin-left: 10px">Part Number:</p></th>
<th>23-0522-50</th>
</tr>
<tr>
<th><p style = "margin-left: 10px">Serial Number:</p></th>
<th><p style = "border-bottom-style: solid; border-width: 1px">?</p></th>
</tr>
<tr>
<th><p style = "margin-left: 10px">Version:</p></th>
<th><p style = "border-bottom-style: solid; border-width: 1px">?</p></th>
</tr>
<tr>
<th><p style = "margin-left: 10px">Test Results:</P></th>
<th><p style = "border-bottom-style: solid; border-width: 1px;">?</p></th>
</tr>
<tr>
<th><p style = "margin-left: 10px">Data/Time of Test:</p></th>
<th><p style = "border-bottom-style: solid; border-width: 1px;">?</p></th>
</tr>
<tr>
<th><p style = "margin-left: 10px">Operator:</p></th>
<th><p style = "border-bottom-style: solid; border-width: 1px;">?</p></th>
</tr>
<tr>
<th><p style = "margin-left: 10px">Job Number:</p></th>
<th><p style = "border-bottom-style: solid; border-width: 1px;">? </p></th>
</tr>
</table>
<button class="accordion" style="background-color:?">Self Test</button>
<div class="panel">
?
</div>
<button class="accordion"style="background-color:?">CCA Test</button>
<div class="panel", >
?
</div>
</body>
</html>
<!-- end snippet -->
答案1
得分: 0
为了整理我的答案，我删除了不属于问题的代码。
我将您的基本代码转换为一个函数，您可以将手风琴元素传递给该函数。这样，您只需要一个函数。
我还更新了代码，使用了querySelectorAll，因为这更加现代化。
在这些一般性更新之后，我只是在body上添加了一个keydown事件侦听器，然后查看按下的键是否是CTRL键。
var acc = document.querySelectorAll(".accordion");
const accordion = (el) => {
el.classList.toggle("active");
const panel = el.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = panel.scrollHeight + "px";
setTimeout(function() {
panel.style.maxHeight = null;
}, 50)
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
setTimeout(function() {
panel.style.maxHeight = "unset";
}, 200)
}
};
acc.forEach((e) => {
e.addEventListener("click", (e) => accordion(e.target))
});
document.body.addEventListener("keydown", (e) => {
if (e.ctrlKey) {
acc.forEach((e) => accordion(e));
}
});
.accordion {
background-color: MintCream;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '.accordion {
background-color: MintCream;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: MintCream;
max-height: 0;
overflow: auto;
transition: max-height 0.2s ease-out;
}
2B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "12";
}
.panel {
padding: 0 18px;
background-color: MintCream;
max-height: 0;
overflow: auto;
transition: max-height 0.2s ease-out;
}
<button class="accordion" style="background-color:?">Self Test</button>
<div class="panel">
?
</div>
<button class="accordion" style="background-color:?">CCA Test</button>
<div class="panel">
?
</div>
英文:
In order to clean up my answer, I got rid of the code that wasn't part of the question.
I took your base code and turned it into a function. That you can pass the accordion element to. That way you only have to have a single function.
I also updated it to use querySelectorAll as that is more up to date.
After those general updates, I simply add an event listener on the body for keydown then look to check if the key pressed was the CTRL button.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var acc = document.querySelectorAll(".accordion");
const accordion = (el) => {
el.classList.toggle("active");
const panel = el.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = panel.scrollHeight + "px";
setTimeout(function() {
panel.style.maxHeight = null;
}, 50)
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
setTimeout(function() {
panel.style.maxHeight = "unset";
}, 200)
}
};
acc.forEach((e) => {
e.addEventListener("click", (e) => accordion(e.target))
});
document.body.addEventListener("keydown", (e) => {
if (e.ctrlKey) {
acc.forEach((e) => accordion(e));
}
});
<!-- language: lang-css -->
.accordion {
background-color: MintCream;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '.accordion {
background-color: MintCream;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: solid;
text-align: center;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: MintCream;
max-height: 0;
overflow: auto;
transition: max-height 0.2s ease-out;
}
2B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "12";
}
.panel {
padding: 0 18px;
background-color: MintCream;
max-height: 0;
overflow: auto;
transition: max-height 0.2s ease-out;
}
<!-- language: lang-html -->
<button class="accordion" style="background-color:?">Self Test</button>
<div class="panel">
?
</div>
<button class="accordion" style="background-color:?">CCA Test</button>
<div class="panel">
?
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论