Улучшить аккордеон
Написал скрипт для аккордеона на чистом JS. На текущий момент все элементы изначально закрыты. При клике на заголовок элемент аккордеона раскрывается, а предыдущий открытый закрывается. Хотелось бы улучшить его тем, чтобы при клике на заголовок текущего открытого элемента этот элемент сворачивался.
function accordeon() {
for (let i = 0; i < accordBlocks.length; i++) {
accordBlocks[i].style.display = 'none';//Первоначальное скрытие всех блоков аккордиона
}
for (let j = 0; j < accordTitles.length; j++) {
accordTitles[j].addEventListener('click', () => {
for (let i = 0; i < accordBlocks.length; i++) {
accordBlocks[i].style.display = 'none';//Закрытие элемента аккордеона
accordTitles[i].style.color = 'black';//Смена цвета заголовка элемента аккордеона
}
accordBlocks[j].style.display = 'block';//Раскрытие элемента аккордеона
accordTitles[j].style.color = '#fa05f6';//Смена цвета заголовка элемента аккордеона
});
}
};
accordeon();
|
Цитата:
|
<button id="btn">Кнопка</button>
<div id="block" style="overflow:hidden; width:300px; transition:1s;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime corporis animi neque reprehenderit! Reprehenderit aliquam ea qui quae natus illo, amet, quidem, debitis eaque, dolorum ducimus. Velit, doloremque neque magnam.</div>
<script>
var height = getComputedStyle(block).height;
block.style.height = '0px';
btn.onclick = function(){
block.style.height = getComputedStyle(block).height == '0px' ? height : '0px';
};
</script>
Думаю что это вам поможет |
А какие именно, а то я что-то туплю?
|
DVV,
Все можно засунуть в один цикл и не создавать несколько, оставьте первый например. |
отрывашка зависимая js
DVV,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", accordeon);
function accordeon() {
var accordTitles = document.querySelectorAll(".accordTitles");
var accordBlocks = document.querySelectorAll(".accordBlocks");
var index;
function closeBlocks(i) {
accordTitles[i].style.color = "black";
accordBlocks[i].style.display = "none"
}
function openBlocks(i) {
accordTitles[i].style.color = "#fa05f6";
accordBlocks[i].style.display = "block";
}
[].forEach.call(accordTitles, function(btn, i) {
closeBlocks(i);
btn.addEventListener("click", function() {
if (index !== i) openBlocks(i);
if (index !== void 0) closeBlocks(index);
index = index !== i ? i : void 0
})
})
};
</script>
</head>
<body>
<div class="accordTitles">1</div>
<div class="accordTitles">2</div>
<div class="accordTitles">3</div>
<div class="accordTitles">4</div>
<div class="accordTitles">5</div>
<div class="accordBlocks">1</div>
<div class="accordBlocks">2</div>
<div class="accordBlocks">3</div>
<div class="accordBlocks">4</div>
<div class="accordBlocks">5</div>
</body>
</html>
|
рони, поубирал лишнее
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", accordeon);
function accordeon() {
var accordBlocks = document.querySelectorAll('.accordBlocks'),
accordTitles = document.querySelectorAll('.accordTitles'),
index = null;
accordTitles.forEach((el,i)=>{
accordBlocks[i].style.display = 'none';
el.addEventListener('click', function(e){
el.style.color = '#fa05f6';
accordBlocks[i].style.display = 'block';
if(index != null){
accordBlocks[index].style.display = 'none';
accordTitles[index].style.color = 'black';
}
index = index==i? null: i;
});
});
}
</script>
<div class="accordTitles">1</div>
<div class="accordTitles">2</div>
<div class="accordTitles">3</div>
<div class="accordTitles">4</div>
<div class="accordTitles">5</div>
<div class="accordBlocks">1</div>
<div class="accordBlocks">2</div>
<div class="accordBlocks">3</div>
<div class="accordBlocks">4</div>
<div class="accordBlocks">5</div>
</body>
</html>
|
Цитата:
|
рони,
поправил :) |
рони,
привет. Подскажи, почему в посте #6 при объявлении переменных каждая состоит из var...;
function accordeon() {
var accordTitles = document.querySelectorAll(".accordTitles");
var accordBlocks = document.querySelectorAll(".accordBlocks");
var index;
}
Не проще писать через запятую, если они применяются "рядом" ?
function accordeon() {
var
accordTitles = document.querySelectorAll(".accordTitles"),
accordBlocks = document.querySelectorAll(".accordBlocks"),
index;
}
п.с. это не претензия) просто вопрос стилистики кода от менее опытного js-user |
| Часовой пояс GMT +3, время: 07:26. |