Мне нужно что бы при открытии одного 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