如何制作像 Kayak 中的下拉菜单？

Question

我想知道如何做一个下拉菜单来过滤，就像这个网站上的一样。上面写着“往返”的那个。如果单击它，菜单会下拉，然后如果您选择其中一个元素，它将成为显示的新值。这种东西有名字吗？或者也许是我需要执行此操作的步骤过程？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>