стилизация select - как свернуть один экземпляр класса при клике на другой?

Question

пробую стилизовать select, написал класс - вроде все работает, но не понимаю, как сделать, чтобы когда один список открыт и происходит клик на другой список - открытый список сворачивался

class Dropdown{
  constructor(select){
    this.select = select
    this.options = select.options
    this.length = select.length + 1
    // обёртка
    let slct = document.createElement('div'),
    opts = document.createElement('div')
    opts.setAttribute('class', 'select__options')
    slct.setAttribute('class', 'select')
    slct.innerHTML = this.select.value
    for(let i = 0; i < this.options.length; i++) {
      let opt = this.options[i]
      opt = document.createElement('div')
      opt.setAttribute('class', 'select__option')
      opt.setAttribute('index', i)
      opt.innerHTML = this.options[i].innerHTML
      opts.appendChild(opt)
    }
    slct.appendChild(opts)
    this.select.parentElement.appendChild(slct)
    this.cssText = slct.style  

    this.slct = select.parentElement.querySelector('.select')
    this.opts = select.parentElement.querySelector('.select__options')
    // события
    let flag = 0
    this.slct.onclick = (e) => {
      document.onclick = (e) => {
        if(!this.slct.contains(e.target)) {
          this.hide(this)
          flag = 0
        }
      }
      if(e.target.className == 'select__option'){
        this.slct.innerHTML = e.target.innerHTML
        this.slct.appendChild(this.opts)
        // записываем аттрибуты нативного селекта
        this.select.selectedIndex = e.target.getAttribute('index')
        this.select.options[this.select.selectedIndex].value = e.target.innerHTML
      }
      if(flag > 0) {
        this.hide(this)
        flag = 0
      } else {
        flag++
        this.show(this)
      }
    }
  }

  show(el){
    let height = getComputedStyle(el.slct).height.replace('px', '')
    el.slct.style.height = height * this.length + 2 + 'px'
    el.slct.style.zIndex = '1'
    el.opts.style.display = 'block'
  }

  hide(el){
    el.slct.style = this.cssText
    el.opts.style.display = 'none'
  }


}

document.querySelectorAll('select').forEach(function(el) {
  new Dropdown(el)
})

https://codepen.io/dima-glushkov/pen/RwWrmXO

Answer 1

Вместо document.onclick вписал document.addEventListener, иначе слушатель переписывался. Остальную логику не трогал. Хотя вряд ли стоит навешивать слушатель на document при каждом клике на импровизированный select.

document.addEventListener('click', (e) => {
        if(!this.slct.contains(e.target)) {
          this.hide(this)
          flag = 0
        }
      })

БЛОГ НА HUSL

стилизация select - как свернуть один экземпляр класса при клике на другой?

Ответы (1 шт):