Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.02.2020, 14:04
DVV DVV вне форума
Кандидат Javascript-наук
Отправить личное сообщение для DVV Посмотреть профиль Найти все сообщения от DVV
 
Регистрация: 26.12.2017
Сообщений: 125

Выпадающий список
В хедере есть кнопка, которая открывает модальное окно. В нем имеется пункт "Выберите время звонка. По клику на нему выпадает список. После выбора первого или второго пункта он вписывается в окно вместо "Выберите время звонка". Но после повторного клика уже по новому заголовку список вновь не выпадает.
P.S. Клик по третьему пункту скрывает этот блок и вместо него открывается textarea (тут все работает норм)

Ссылка на проект https://viacheslavdemchenko.github.io/blackcode/

const headerBtn = document.querySelector('.header__btn');
    const headerModal = document.querySelector('.main-modal');
    const modalClose = document.querySelector('.close'); 
    const container = document.querySelector('.container-fluid');
    const body = document.getElementsByTagName('body')[0];
    const timeSelect = document.querySelectorAll('.select__option');
    const currentTime = document.getElementById('current-select');
    const timeSelectList = document.querySelector('.select'); 
    const userTime = document.querySelector('.main-modal__user-time');

    headerBtn.addEventListener('click', showHeaderModal);
    modalClose.addEventListener('click', hideHeaderModal);
    document.addEventListener('keydown', eschideHeaderModal);
    document.addEventListener('click', clickhideHeaderModal);
    currentTime.addEventListener('click', timeListToggle);

    function showHeaderModal() {
        if (headerModal.style.display !== 'block') {
            headerModal.style.display = 'block';
            container.classList.add('container-fluid--modal-overlay');
            body.classList.add('no-scroll');
        } 
    }

    function hideHeaderModal() {
        headerModal.style.display = 'none';
        container.classList.remove('container-fluid--modal-overlay');
        body.classList.remove('no-scroll');
    }

    function eschideHeaderModal(e) {
        if (e.keyCode === 27) {
            hideHeaderModal();	        
        }
    }

    function clickhideHeaderModal(e) {
        let target = e.target;
        if (target == container) {
            hideHeaderModal();
        }
    }

    function timeListToggle() {
        timeSelectList.classList.toggle('select--active');
    }

    function timeCallSelect() {
        timeSelect.forEach( (time, index) => {
            time.addEventListener('click', () => {
                currentTime.textContent = time.textContent;
                timeListToggle();
                if(index == 2) {
                    currentTime.style.display = 'none';
                    userTime.style.display = 'block';
                }
            });
        });
    }
    timeCallSelect();
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выпадающий список без кнопок-стрелок для открытия vertmann (X)HTML/CSS 7 15.11.2013 11:43
Ext.form.ComboBox, как принудительно обнулить выпадающий список? martinelli ExtJS 4 10.07.2012 12:23
Autocomplete + выпадающий список yarnik jQuery 0 08.03.2012 15:20
Выпадающий список не помещается в div'е LA_ Элементы интерфейса 5 01.11.2010 10:43
Выпадающий список с возможностью ввода текста LA_ Элементы интерфейса 6 27.10.2010 16:30