Задать вопрос
@RamzilAsadullin00

Закрывать другие селекты при открытии одного?

Мне нужно что бы при открытии одного select закрывался другой.

<div class="header__select select" data-js-select>
                    <ul class="select__list" data-js-select-list>
                      <li><a class="select__link header__menu-link" href="/" data-js-select-link>Version</a></li>
                      <li><a class="select__link header__menu-link" href="/" data-js-select-link>Release</a></li>
                      <li><a class="select__link header__menu-link" href="/" data-js-select-link>Beta</a></li>
                      <li><a class="select__link header__menu-link" href="/" data-js-select-link>Alpha</a></li>
                    </ul>
                  </div>


.select {
    position: relative;
    display: inline-flex;
    padding: rem(12);
    cursor: pointer;

    &::after {
        content: '>';
        transform: rotate(90deg);
        transition-duration: var(--transition-duration);
    }

    &:has(.is-active)::after {
        transform: rotate(-90deg);
    }

    &__list {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 10;
    
        display: flex;
        flex-direction: column;
        row-gap: rem(3);
    
        max-height: rem(200);
        padding: rem(5);
        padding-right: rem(35);
        overflow-y: auto;
    
        background-color: var(--color-dark-blue);
        border: var(--border);
        transition-duration: var(--transition-duration);
    
        &:not(.is-active) {
            @include hide;
    
            transform: translateY(-10%);
        }
    }
}


const rootSelector = '[data-js-select]'

class Select {
    selectors = {
        root: rootSelector,
        selectorList: '[data-js-select-list]',
        selectorLink: '[data-js-select-link]',
    }

    stateClasses = {
        isActive: 'is-active',
    }

    constructor (rootElement) {
        this.rootElement = rootElement
        this.selectorListElement = this.rootElement.querySelector(this.selectors.selectorList)
        this.selectorsLinksElements = this.rootElement.querySelectorAll(this.selectors.selectorLink)
        this.bindEvents()
    }

    onSelectorClick = () => {
        this.selectorListElement.classList.toggle(this.stateClasses.isActive)
    }

    bindEvents() {
        this.rootElement.addEventListener('click', this.onSelectorClick)
    }
}

class SelectCollection {
    constructor () {
        this.init()
    }

    init() {
        document.querySelectorAll(rootSelector).forEach((element) => {
            new Select(element)
        })

    }
}

export default SelectCollection
  • Вопрос задан
  • 67 просмотров
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы