Открытие и закрытие элеметов
Всё сам.
Сделал код, полностью работает, можно ли как то его улучшить? Говнокод или пойдёт? Если убрать closeAnswer то остальные открытые элементы не будут сами закрываться, а будет закрываться только тот элемент, на который кликну. Можно потыкать https://plnkr.co/edit/Tkp3xcf8T0nKYh8ykgvC?p <!DOCTYPE html> <html> <head> <style> .answer-index { display: none; } </style> <script src="script.js"></script> </head> <body> <div class="box-question"> <div class="question"> <div class="additionally"> <a href="#">Показать ответ 1</a> </div> </div> <div class="answer answer-index"> Этот текст открывается и закрывается </div> </div> <div class="box-question"> <div class="question"> <div class="additionally"> <a href="#">Показать ответ 2</a> </div> </div> <div class="answer answer-index"> Этот текст открывается и закрывается </div> </div> <div class="box-question"> <div class="question"> <div class="additionally"> <a href="#">Показать ответ 3</a> </div> </div> <div class="answer answer-index"> Этот текст открывается и закрывается </div> </div> </body> </html> function closeAnswer() { var allAnswers = document.querySelectorAll('.answer'); allAnswers.forEach(function (answer, i) { answer.classList.add('answer-index'); }) } document.documentElement.addEventListener('click', function (event) { var target = event.target; if (target.classList.contains("button-answer")) { var question = target.closest('.box-question'); var answer = question.querySelector('.answer'); if (answer.classList.contains('answer-index')) { closeAnswer() answer.classList.toggle('answer-index'); } else { answer.classList.toggle('answer-index'); } } }); |
Цитата:
Цитата:
if (answer.classList.contains('answer-index')) { closeAnswer(); }; answer.classList.toggle('answer-index'); |
Часовой пояс GMT +3, время: 13:14. |