У меня есть простой аккордеон, разработанный с использованием чистого javascript
без jQuery и Pure CSS, и все работает хорошо. Проблема в том, что первый аккордеон расширялся при загрузке страницы, я пробовал много способов, используя CSS
и JS
Но это не работает, я плохо разбираюсь в JavaScipt, я пытался удалить класс active
при загрузке окна, и он удалился, но все равно расширился!! не могли бы вы помочь с этим?
// ============== toggle accordion =================//
let header = document.querySelectorAll(".accordion-header");
// ============= get all accoridon header =============//
header.forEach(
(header) => {
header.addEventListener("click", function(e) {
let accordion = document.querySelectorAll(".accordion");
let parentElm = header.parentElement;
let siblings = this.nextElementSibling;
// ============= remove accordion body height ==========//
accordion.forEach((element) => {
element.children[1].style.maxHeight = null;
});
// =========== toggle active class ==============//
parentElm.classList.toggle("active");
if (parentElm.classList.contains("active")) {
// ============== remove active class from all the accordions ===//
accordion.forEach((element) => {
element.classList.remove("active");
});
// ============== toggle active class where we clicked ========//
parentElm.classList.toggle("active");
// ============= set max height ============//
if (siblings.style.maxHeight) {
siblings.style.maxHeight = null;
} else {
siblings.style.maxHeight = siblings.scrollHeight + "px";
}
}
});
}
);
window.onload = function() {
header[0].click();
}
.accordion-container {
padding: 0 100px;
}
.accordion .accordion-header {
padding: 15px 20px;
cursor: pointer;
position: relative;
}
.accordion .accordion-header h2 {
margin: 0;
font-size: 24px;
font-weight: 400;
line-height: 32px;
text-decoration: underline;
}
.accordion .accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height ease 0.5s;
padding: 0 20px;
}
.accordion .accordion-body p {
font-weight: 400;
padding-bottom: 20px;
line-height: 1.5;
}
<div class="accordion">
<div class="accordion-header">
<h2>Accordion Header</h2>
</div>
<div class="accordion-body">
<p>Accordion Body</p>
</div>
</div>
<div class="accordion">
<div class="accordion-header">
<h2>Accordion Header</h2>
</div>
<div class="accordion-body">
<p>
<p>Accordion Body</p>
</p>
</div>
</div>
1 ответ
Приведенный ниже код вызовет нажатие на первый заголовок. Что заставит этот аккордеон расшириться. Просто удалите этот код, и он перестанет автоматически расширяться.
window.onload = function() {
header[0].click();
}
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript/JS) и его различных диалектах/реализациях (кроме ActionScript). Обратите внимание, что JavaScript — это НЕ Java. Включите все теги, относящиеся к вашему вопросу: например, [node.js], [jQuery], [JSON], [ReactJS], [angular], [ember.js], [vue.js], [typescript], [стройный] и т. д.