Форум

DVV · #1 (**permalink**) 07.09.2018, 15:14

Написал скрипт для аккордеона на чистом 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();

рони · #2 (**permalink**) 07.09.2018, 15:26

Сообщение от DVV

Хотелось бы улучшить его тем, чтобы при клике на заголовок текущего открытого элемента этот элемент сворачивался.

уберите ~~пару циклов~~ все циклы кроме одного

j0hnik · #3 (**permalink**) 07.09.2018, 15:41

<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 · #4 (**permalink**) 07.09.2018, 15:56

А какие именно, а то я что-то туплю?

j0hnik · #5 (**permalink**) 07.09.2018, 15:59

DVV,
Все можно засунуть в один цикл и не создавать несколько, оставьте первый например.

рони · #6 (**permalink**) 07.09.2018, 16:14

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>

j0hnik · #7 (**permalink**) 07.09.2018, 16:41

рони, поубирал лишнее

<!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>

рони · #8 (**permalink**) 07.09.2018, 16:50

Сообщение от j0hnik

рони, поубирал лишнее

нельзя открыть один и тотже блок

j0hnik · #9 (**permalink**) 07.09.2018, 17:05

рони,
поправил

madeas · #10 (**permalink**) 07.09.2018, 20:47

рони,
привет. Подскажи, почему в посте #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

Форум

Справочник

Discord чат

Курсы javascript