Как сделать выпадающее меню как в Kayak?

Question

Мне было интересно, как я мог бы go сделать выпадающее меню для фильтрации, как здесь на этом сайте. Тот, где написано «Туда и обратно» наверху. Если щелкнуть по нему, меню выпадает вниз, а затем, если вы выберете один из элементов, оно будет отображаться с новым значением. Есть ли название для такого рода вещей? Или, возможно, процесс шагов мне нужно реализовать это?
https://www.kayak.com/
Спасибо!

Answer 1

Это простой выпадающий список меню, ничего больше. Это одаренный код для вас;)

/***
 *
 * @get
 * Need to get the elms
 */

let 

    dropdown = document.querySelector('.dropdown'),
    display  = document.querySelector('#data-value'),
    list     = document.querySelector('.list'),
    listLi   = document.querySelectorAll('.list li');


/***
 *
 * @main part
 * This is the main part 
 */

dropdown.addEventListener('click', function(){
  list.classList.toggle('active');
});

listLi.forEach(elm =>{
  elm.addEventListener('click', function(){
    display.textContent = this.getAttribute('value');
  })
})

body{
  margin: 0;
  font-family: Sans-serif;
}

.wrapper{
  width: 100%;
  max-width: 250px;
  margin: auto;
  
}

.dropdown{
  margin-top: 1rem;
  position: relative;
  border: 1px solid #d1d5da;
  background-color: #fff;
  cursor: pointer;
}

.display{
  display: block;
  text-align: center;
  font-size: 1.2rem;
}

span{
  display: block;
  padding: .5rem
}

.list{
  position: absolute;
  background-color: #fff;
  top: -5px;
  left: -5px;
  border: 1px solid #ddd;
  padding: 1.5rem 0;
  margin: 0;
  width: 105%;
  list-style: none;
  display: none;
}

.list.active{
  display: block; /* you can also set a animation */
}

.list li{
  padding: .5rem;
  text-align: center;
}

.list li:hover{
  background-color: #f1f1f1;
  color: #212121;
  cursor: pointer;
}

<div class="wrapper">
  
   <div class="dropdown">
     <div class="display">
       <span id="data-value">Travel</span>
     </div>
     <ul class="list">
        <li value="Life">Life</li>
        <li value="Books">Books</li>
        <li value="Sex">Sex</li>
     </ul>
  </div>
  
</div>