Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.09.2019, 07:17
Профессор
Отправить личное сообщение для DivMan Посмотреть профиль Найти все сообщения от DivMan
 
Регистрация: 08.03.2016
Сообщений: 429

Открытие и закрытие элеметов
Всё сам.

Сделал код, полностью работает, можно ли как то его улучшить?

Говнокод или пойдёт?

Если убрать 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');
            }
        }
 
 
 
    });
Ответить с цитированием
  #2 (permalink)  
Старый 30.09.2019, 08:15
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от DivMan Посмотреть сообщение
Говнокод или пойдёт?
Для говнокода мало текста.

Сообщение от DivMan Посмотреть сообщение
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');
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Открытие и закрытие одной кнопкой Jolly Элементы интерфейса 2 01.06.2017 12:24
Открытие и закрытие меню по клике ruslansh Общие вопросы Javascript 1 05.12.2016 23:16
Плавное открытие и закрытие блока текста web-expanse Общие вопросы Javascript 10 25.11.2014 15:25
Открытие, смена, закрытие вкладки(страницы) MayBe Events/DOM/Window 24 18.03.2011 20:54
popup окна. Открытие и закрытие их. FullHouse Элементы интерфейса 2 30.09.2010 10:01