[英]Accordion JS. How add class on click to other class?
How can I add.active to.accordion-item when I click to.accordion-item-header?单击 to.accordion-item-header 时如何将 add.active 添加到 .accordion-item? I want to add.active to switch my bgc with javascript without jquery.
我想 add.active 将我的 bgc 切换为 javascript 而不是 jquery。
HTML HTML
<div class="accordion">
<div class="accordion-item">
<div class="accordion-item-header">Basics</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Lorem Ipsum
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">Standard</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Lorem Ipsum
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">Pro care</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Lorem Ipsum
</div>
</div>
</div>
</div>
CSS (SCSS) CSS (SCSS)
.accordion {
border: 1px solid #E3E1D5;
border-radius: 20px;
padding: 40px 40px 30px 40px;
height: 100%;
&-item {
width: 250px;
padding: 14px 40px;
background: #EDF2EC;
border-radius: 20px;
&:not(:first-child) {
margin-top: 32px;
}
// &.active {
// background: #D6E7D2;
// }
&-header {
position: relative;
font-family: 'Inter';
font-weight: 700;
font-size: 20px;
color: #000000;
cursor: pointer;
&::after {
content: url('../icons/arrows/prices_arrow.svg');
position: absolute;
right: 0;
transition: all 0.6s;
}
&.active {
&::after {
content: url('../icons/arrows/prices_arrow.svg');
transform: rotate(-180deg);
}
}
}
&-body {
max-height: 0;
overflow: hidden;
transition: all 0.6s;
&.active {
max-height: 400px;
}
&-content {
margin-top: 12px;
border-top: 0.5px solid #AEA1A1;
}
}
}
}
JS JS
document.querySelectorAll('.accordion-item-header').forEach((accordionItemHeader) => { //получаю все header на которые буду нажимать
accordionItemHeader.addEventListener('click', () => {
accordionItemHeader.classList.toggle('active'); //добавляю класс активности для header + <-> -
const accordionItemBody = accordionItemHeader.nextElementSibling; //получаю следующий элемент за header
if(accordionItemHeader.classList.contains('active')) {
//если у header есть класс активности, тогда выставляем max-height
accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + 'px';
}
else {
accordionItemBody.style.maxHeight = 0;
}
});
});
enter image description here I want to add this class to accordion-item when I click on accordion-item-header. enter image description here我想在单击 accordion-item-header 时将此 class 添加到 accordion-item 中。 I do not know, how I can get accordion-item.
我不知道,我怎样才能得到手风琴物品。 I tried querySelector and in this case I change bgc only on first class even when I click on the second or third element, the bgc changes only for the first.
我尝试了 querySelector,在这种情况下,我仅在第一个 class 上更改了 bgc,即使我单击第二个或第三个元素时,bgc 也仅针对第一个元素更改。 I tried to use querySelectorAll but in this case I change my bgc for all element even the ones I didn't click on.
我尝试使用 querySelectorAll 但在这种情况下,我更改了所有元素的 bgc,即使是我没有点击的元素。
&.active {
background: #D6E7D2;
}
document.querySelectorAll('.accordion-item-header').forEach((accordionItemHeader) => { //получаю все header на которые буду нажимать
accordionItemHeader.addEventListener('click', (evt) => {
console.log(evt.target);
const elai = evt.target.closest('.accordion-item');
console.log(elai);
elai.classList.toggle('active'); //добавляю класс активности для header + <-> -
});
});
in your eventlistener just add 'event' (evt)在您的事件监听器中只需添加“事件”(evt)
from this evt.target element clicked, you search 'closest' accordion-item从这个 evt.target 元素点击,你搜索“最近的”手风琴项目
and you toggle your class然后你切换你的 class
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.