Как сделать чтобы выбранное значение в выпадающем списке осталось после переключения?

Question

Как сделать так, чтобы при нажатии на стрелку или на li, раскрывался список и выбранное значение отображалось, как 'Декоративная краска'? То есть, чтобы вешался класс active на выбранную мной li. Я делал так- создал блок paint и внутри ul c лишками. Первому задал класс active, чтобы отображался выбранным, а другим li задал фон и цвет по средствам .paint li:not(:first-child). А вот как сделать так, чтобы при нажатии выпадал список и на выбранное вешался класс active не пойму.

вот так выглядит пример:

.paint li:not(:first-child) { display: block; }

Код блока

.paint {
  display: flex;
  justify-content: center;
}

.paint li a {
  font-family: Lora;
  font-style: italic;
  font-size: 18px;
}

.paint li a:hover {
  color: #fdac7a;
}

.paint li.active a {
  border-bottom: 1px dashed #ff8d2e;
  color: #ff8d2e;
}

.paint li.active:after {
  content: ' \25BC';
  color: #ff8d2e;
  font-size: 50%;
  cursor: pointer;
}

.paint li:not(:first-child) {
  background: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  display: none;
  padding: 5px;
}

<div class="deals-section">
  <div class="wrapper">
    <div class="title">
      <span>лучшие предложения</span>
    </div>
    <div class="paint">
      <ul>
        <li class="active"><a href="#">Декоративная краска</a></li>
        <li><a href="#">Эмалевая краска</a></li>
        <li><a href="#">Масляная краска</a></li>
      </ul>
    </div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate consequatur quae qui quia dolore minus quaerat nulla, sit, hic culpa fuga at veniam ipsum animi. Suscipit quod minima, pariatur debitis impedit, vel officiis, aspernatur voluptas inventore
    voluptate, enim quia quaerat?
  </div>
</div>

Answer 1

Добавил немного стилей так, чтобы выбранный элемент всегда был первым и остальное по мелочи.

Показ и скрытие происходит благодаря навешиванию класса paint--visible, а у элементов списка с этим классом-родителем появляется свойство display: list-item.

Смена самого класса active происходит следующим образом:

убираем с активного элемента класс active
в зависимости от того, по какой ноде был клик навешиваем класс active (event delegation)

Ну и не забываем запретить обычное поведение для ссылки.

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

const paintNode = document.querySelector('.paint')


paintNode.addEventListener('click', (e) => {
  const liActiveNode = paintNode.querySelector('li.active')
  
  paintNode.classList.toggle('paint--visible')
  liActiveNode.classList.remove('active')
  
  if (e.target.tagName === 'LI') {
    e.target.classList.add('active')
  } else if (e.target.tagName === 'A') {
    e.preventDefault()
    e.target.parentNode.classList.add('active')
  }
})

.paint {
  display: flex;
  justify-content: center;
}

.paint ul {
  display: flex;
  flex-direction: column;
}

.paint li a {
  font-family: Lora;
  font-style: italic;
  font-size: 18px;
}

.paint li a:hover {
  color: #fdac7a;
}

.paint li.active {
  order: -1;
}

.paint li.active a {
  border-bottom: 1px dashed #ff8d2e;
  color: #ff8d2e;
}

.paint li.active:after {
  content: ' \25BC';
  color: #ff8d2e;
  font-size: 50%;
  cursor: pointer;
}

.paint li:not(.active) {
  background: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
  display: none;
  padding: 5px;
}

.paint--visible li {
  display: list-item !important;
}

<div class="deals-section">
  <div class="wrapper">
    <div class="title">
      <span>лучшие предложения</span>
    </div>
    <div class="paint">
      <ul>
        <li class="active"><a href="#">Декоративная краска</a></li>
        <li><a href="#">Эмалевая краска</a></li>
        <li><a href="#">Масляная краска</a></li>
      </ul>
    </div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate consequatur quae qui quia dolore minus quaerat nulla, sit, hic culpa fuga at veniam ipsum animi. Suscipit quod minima, pariatur debitis impedit, vel officiis, aspernatur voluptas inventore
    voluptate, enim quia quaerat?
  </div>
</div>

БЛОГ НА HUSL

Как сделать чтобы выбранное значение в выпадающем списке осталось после переключения?

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