如何制作像皮划艇一样的下拉菜单?

问题描述 投票:0回答:1

我想知道如何做一个下拉菜单来像本网站上的菜单那样进行过滤。在顶部显示“往返”的那个。如果单击它,则将弹出一个菜单,然后,如果您选择其中一个元素,它将成为显示的新值。这种东西有名字吗?还是我需要执行此步骤的过程?https://www.kayak.com/谢谢!

javascript html user-interface filter
1个回答
2
投票

这是一个简单的下拉选项菜单栏,仅此而已。这是给您的礼物代码;)

/***
 *
 * @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>
© www.soinside.com 2019 - 2024. All rights reserved.