Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Спойлеры открываются, но не закрываются,
Hunter0k  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Пользователь
**

Профиль
Группа: Пользователь
Сообщений: 53
Пользователь №: 42466
На форуме: 9 лет, 1 месяц, 20 дней
Карма:





Здравствуйте, есть такой вот код на JAVASCRIPT с рабочими спойлерами, они открываются поочередно, но не закрываются, как исправить проблему. Пробывал менять classList на toggle - не вышло. Прошу помощи, заранее спасиб.



<div data-modal="spoiler-1">spoiler-1</div>
<div
class="spoiler__body close_prev" id="spoiler-1">
Содержимое spoiler-1
</div>

<div
data-modal="spoiler-2">spoiler-2</div>
<div
class="spoiler__body close_prev" id="spoiler-2">
Содержимое spoiler-2

<div data-modal="spoiler-3">spoiler-3</div>
<div
class="spoiler__body" id="spoiler-3">
Содержимое spoiler-3
</div>
</div>




<style>
.spoiler__body {
position: absolute; width: 250px; height: 0; opacity: 1; visibility: visible; background: #BCC5C8;
border-radius: 4px; box-shadow: none; overflow: hidden; z-index: 2; box-shadow: inset 0 0 1px #888;
transition: 0.3s all; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all;
}
.spoiler__body.open {height: auto; padding: 1em;}
</style>



<script>
// МОДАЛЬНОЕ ОКНО + СПОЙЛЕР //

document.addEventListener('DOMContentLoaded', () => {
const mOpen = document.querySelectorAll('[data-modal]');
if (mOpen.length == 0) return; // если нет элементов управления всплывающими окнами, прекращаем работу скрипта

const overlay = document.querySelector('.modal__overlay'),
modals = document.querySelectorAll('.modal__body, .spoiler__body'),
mClose = document.querySelectorAll('[data-close]');

for (let el of mOpen) {
el.addEventListener('click', function(e) {
let modalId = el.dataset.modal,
modal = document.getElementById(modalId);

// закрытие спойлера при открытии другого
if (modal.classList.contains("close_prev")) { modalClose(modal); }

modalShow(modal);
});
}

for (let el of mClose) {
el.addEventListener('click', modalClose); // регистрируются обработчик события нажатия на крестик
}

document.addEventListener('keydown', modalClose); // регистрируются обработчик события нажатия на клавишу

function modalShow(modal) {
if (!modal.classList.contains("spoiler__body")) { // условие, при котором откл. оверлей для спойлеров
overlay.classList.add('open');
}
modal.classList.toggle('open');
}

function modalClose(event) {
if ( event.type != 'keydown' || event.keyCode === 27 ) {
for (let modal of modals) {
modal.classList.remove('open');
}
overlay.classList.remove('open');
}
}

}
)
</
script>
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса