TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超11個(gè)贊
這是一個(gè)簡(jiǎn)單的下拉選項(xiàng)菜單欄。
這是給你的一個(gè)有天賦的代碼；）
/***
*
* @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>
舉報(bào)