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

Question

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

Answer 1

这是一个简单的下拉选项菜单栏。这是给你的一个有天赋的代码；）/***&nbsp;*&nbsp;* @get&nbsp;* Need to get the elms&nbsp;*/let&nbsp;&nbsp; &nbsp; dropdown = document.querySelector('.dropdown'),&nbsp; &nbsp; display&nbsp; = document.querySelector('#data-value'),&nbsp; &nbsp; list&nbsp; &nbsp; &nbsp;= document.querySelector('.list'),&nbsp; &nbsp; listLi&nbsp; &nbsp;= document.querySelectorAll('.list li');/***&nbsp;*&nbsp;* @main part&nbsp;* This is the main part&nbsp;&nbsp;*/dropdown.addEventListener('click', function(){&nbsp; list.classList.toggle('active');});listLi.forEach(elm =>{&nbsp; elm.addEventListener('click', function(){&nbsp; &nbsp; display.textContent = this.getAttribute('value');&nbsp; })})body{&nbsp; margin: 0;&nbsp; font-family: Sans-serif;}.wrapper{&nbsp; width: 100%;&nbsp; max-width: 250px;&nbsp; margin: auto;&nbsp;&nbsp;}.dropdown{&nbsp; margin-top: 1rem;&nbsp; position: relative;&nbsp; border: 1px solid #d1d5da;&nbsp; background-color: #fff;&nbsp; cursor: pointer;}.display{&nbsp; display: block;&nbsp; text-align: center;&nbsp; font-size: 1.2rem;}span{&nbsp; display: block;&nbsp; padding: .5rem}.list{&nbsp; position: absolute;&nbsp; background-color: #fff;&nbsp; top: -5px;&nbsp; left: -5px;&nbsp; border: 1px solid #ddd;&nbsp; padding: 1.5rem 0;&nbsp; margin: 0;&nbsp; width: 105%;&nbsp; list-style: none;&nbsp; display: none;}.list.active{&nbsp; display: block; /* you can also set a animation */}.list li{&nbsp; padding: .5rem;&nbsp; text-align: center;}.list li:hover{&nbsp; background-color: #f1f1f1;&nbsp; color: #212121;&nbsp; cursor: pointer;}<div class="wrapper">&nbsp;&nbsp;&nbsp; &nbsp;<div class="dropdown">&nbsp; &nbsp; &nbsp;<div class="display">&nbsp; &nbsp; &nbsp; &nbsp;<span id="data-value">Travel</span>&nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; &nbsp;<ul class="list">&nbsp; &nbsp; &nbsp; &nbsp; <li value="Life">Life</li>&nbsp; &nbsp; &nbsp; &nbsp; <li value="Books">Books</li>&nbsp; &nbsp; &nbsp; &nbsp; <li value="Sex">Sex</li>&nbsp; &nbsp; &nbsp;</ul>&nbsp; </div>&nbsp;&nbsp;</div>