Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выпадающий список (https://javascript.ru/forum/dom-window/79543-vypadayushhijj-spisok.html)

DVV 20.02.2020 14:04

Выпадающий список
 
В хедере есть кнопка, которая открывает модальное окно. В нем имеется пункт "Выберите время звонка. По клику на нему выпадает список. После выбора первого или второго пункта он вписывается в окно вместо "Выберите время звонка". Но после повторного клика уже по новому заголовку список вновь не выпадает.
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();


Часовой пояс GMT +3, время: 10:26.