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

Question

我想知道我可能會如何做一個下拉菜單來過濾，就像這個網站上的一樣。 上面寫着“往返”的那個。 如果單擊它，將下拉一個菜單，然后如果您將 select 元素之一變為顯示的新值。 這種東西有名字嗎？ 或者也許是我需要執行此操作的步驟過程？
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>