[英]How to enter the style of a div and modify it if other divs have the same class?
我想制作一个手风琴，但我不知道如何输入“手风琴”内部的“手风琴__content”样式以将显示从块更改为无。
我想制作一个手风琴，但我不知道如何输入“手风琴”内部的“手风琴__content”样式以将显示从块更改为无。 我想制作一个手风琴，但我不知道如何输入“手风琴”内部的“手风琴__content”样式以将显示从块更改为无。 我想制作一个手风琴，但我不知道如何输入“手风琴”内部的“手风琴__content”样式以将显示从块更改为无。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | FAQ Accordion Card</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<img class="imgback" src="/design/desktop-design.jpg" alt="">
<div class="container">
<img src="images/illustration-box-desktop.svg" alt="" class="box__svg">
<div class="sub__container">
<img src="images/bg-pattern-desktop.svg" alt="" class="bg__svg">
<img src="images/illustration-woman-online-desktop.svg" alt="" class="women__svg">
<div class="faq">
<h1 class="faq__tittle">FAQ</h1>
<div class="accordion__container">
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">How many team members can I invite?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content">
<p >You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">What is the maximum file upload size?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content">
<p>No more than 2GB. All files in your account must fit your allotted storage space.
</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">How do I reset my password?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content">
<p>Click “Forgot password” from the login page or “Change password” from your profile
A reset link will be emailed to you.</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">Can I cancel my subscription?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content">
<p>Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
</div>
<hr>
<div class="accordion">
<div class="accordion__tittle">
<h4 class="tittle">Do you provide additional support?</h4>
<img src="./images/icon-arrow-down.svg" alt="" class="arrow">
</div>
<div class="accordion__content">
<p>Chat and email support is available 24/7. Phone lines are open during normal</p>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
for (let i = 0; i<acc.length; i++){
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
/* var panel = this.nextElemenSibling;
console.log(panel);
if(panel.style.display === "block"){
panel.style.display = "none";
}
else{
panel.style.display = "block";
} */
});
}
</script>
</body>
</html>
您正在您的 JS 中寻找this.children[1]以使用手风琴__content 的 class 来定位accordion__content子项
然后您可以创建一个 class，它将向accordion__tittle元素添加无显示，默认情况下添加到 HTML。 使用 JS 在点击事件监听器上切换它。
我没有清理您的 CSS 只是向您展示如何使用您已经编写的条件添加/删除。
或者，您可以只编写条件来检查el.style.display = block ，然后像您在代码 pin 中所做的那样添加/删除。
注意：我删除了所有其他 html 和 CSS 以专注于您的问题。
const acc = document.getElementsByClassName("accordion") // much cleaner JS for (let i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active") this.children[1].classList.toggle('display-none') // toggle the class.display-none no conditional needed }) }
* { margin: 0; padding: 0; box-sizing: border-box; }.attribution { font-size: 11px; text-align: center; }.attribution a { color: hsl(228, 45%, 44%); } /*ACCORDION*/ /* Added this class to use for toggling display of none to your accordian elements */.display-none { display: none; }.accordion__container { padding-top: 20px; padding-right: 15%; }.accordion { cursor: pointer; display: flex; flex-direction: column; justify-content: center; height: 3.5rem; width: 100%; }.active.accordion { background: green; }.accordion__tittle { position: relative; font-size: 0.9rem; font-weight: 700; }.arrow { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); }.accordion__content { height: 40px; width: 90%; padding-top: 10px; font-size: 0.8rem; font-weight: 400; }.active { background-color: seagreen; } hr { opacity: 0.7; }.attribution { position: absolute; bottom: 0; }
<div class="accordion__container"> <div class="accordion"> <div class="accordion__tittle"> <h4 class="tittle">How many team members can I invite?</h4> <img src="./images/icon-arrow-down.svg" alt="" class="arrow"> </div> <div class="accordion__content display-none"> <p>You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p> </div> </div> <hr> <div class="accordion"> <div class="accordion__tittle"> <h4 class="tittle">What is the maximum file upload size?</h4> <img src="./images/icon-arrow-down.svg" alt="" class="arrow"> </div> <div class="accordion__content display-none"> <p>No more than 2GB. All files in your account must fit your allotted storage space.</p> </div> </div> <hr> <div class="accordion"> <div class="accordion__tittle"> <h4 class="tittle">How do I reset my password?</h4> <img src="./images/icon-arrow-down.svg" alt="" class="arrow"> </div> <div class="accordion__content display-none"> <p>Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.</p> </div> </div> <hr> <div class="accordion"> <div class="accordion__tittle"> <h4 class="tittle">Can I cancel my subscription?</h4> <img src="./images/icon-arrow-down.svg" alt="" class="arrow"> </div> <div class="accordion__content display-none"> <p>Yes. Send us a message and we'll process your request no questions asked?</p> </div> </div> <hr> <div class="accordion"> <div class="accordion__tittle"> <h4 class="tittle">Do you provide additional support.</h4> <img src="./images/icon-arrow-down.svg" alt="" class="arrow"> </div> <div class="accordion__content display-none"> <p>Chat and email support is available 24/7. Phone lines are open during normal business hours.</p> </div> </div> <hr> </div>
到 select 所有具有相同 class 的元素：
const accordions = document.querySelectorAll('.accordion');
这是一个 NodeList，类似于索引从 0 开始的数组。如果你想 select 第一个手风琴，那么：
const youAccordion = accordions[0];
等等。
您必须在点击处理程序 function 中获取 this.lastElementChild 属性，您的 function 将是：
....
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
//var panel = this.nextElementSibling;//
var panel = this.lastElementChild;
console.log(panel);
if(panel.style.display === "block"){
panel.style.display = "none";
}
else{
panel.style.display = "block";
}
});
....
当其他div具有相同的类时，您将鼠标悬停在div上的addClass
[英]addClass on div you are hovering over when other divs have same class
Clipboard.js，其中所需的复制文本div与页面上的其他div具有相同的类或ID
[英]clipboard.js where the desired copied text div will have same class or id as other divs on page
如何让jQuery只修改一个div，而不是同一个类的所有div？
[英]How do I make jQuery modify only one div, instead of all divs of the same class?
当其他div具有相同的类时，如何要求jquery在一个div上应用
[英]How to ask jquery to apply on one div when other div have the same class
我想展示很多同班的div。 该div位于div内，就像工具提示一样
[英]I have plenty of divs with same class, that I want to show. This div is inside a div, so like a tooltip
如何使用jQuery影响同一类的8个div的单个div？
[英]How can I affect a single div of 8 divs of a same class with jQuery?
如何使用.classList.add（'class'）在具有多个相同class名称的元素与javaScript中的其他元素添加样式
[英]How to add style on element which have multiple same class name with other elements in javaScript using .classList.add(‘class’)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.