javascript實現下拉選單效果
阿新 • • 發佈：2021-02-18
用Javascript實現下拉選單，供大家參考，具體內容如下
正在學習大前端中，有程式碼和思路不規範不正確的地方往多多包涵，感謝指教
下拉選單，或者側拉選單在實際開發當中非常的實用
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
border: 0;
}
.menu{
width: 100%;
height: 50px;
border: 1px solid lightyellow;
box-shadow: 0 2px 5px black;
}
.menu div{
/*margin-top: 10px;*/
float: left;
width: 19.82%;
height: 50px;
/* border: 1px solid red;*/
text-align: center;
}
button{
margin-top: 15px;
cursor: pointer;
width: 25px;
height: 15px;
background-color: pink;
}
.show1{
display: none;
width: 19.82%;
height: 250px;
/*border: 1px solid black;*/
}
.show1 div{
border: 1px solid pink;
width: 247px;
height: 48px;
text-align: center;
}
a{
text-decoration: none;
display: block;
margin-top: 10px;
}
a:hover{
color: #ff242d;
font-size: 25px;
}
</style>
</head>
<body>
<div class="menu">
<div>下拉1
<button>^</button>
</div>
<div>下拉2
<button>^</button>
</div>
<div>下拉3
<button>^</button>
</div>
<div>下拉4
<button>^</button>
</div>
<div>下拉5
<button>^</button>
</div>
</div>
<div class="show1">
<div><a href="#" >4654tyyut</a></div>
<div><a href="#" >4654</a></div>
<div><a href="#" >sdf</a></div>
<div><a href="#" >sdf</a></div>
<div><a href="#" >tert</a></div>
</div>
<script>
var btn=document.querySelector('button')
var show1=document.querySelector('.show1')
var flag=0
btn.onclick=function () {
if (flag === 0) {
show1.style.display = 'block'
flag=1
}else {
show1.style.display='none'
flag=0
}
}
</script>
</body>
</html>程式碼解釋
這裡主要就是用script的onclick來進行實現，這裡我用到的按鈕，也可以換成其他的東西，做法都是類似的。
onclick點選相應的東西過後，便會觸發事件，呼叫函式，然後判斷flag的值來進行相應的操作，隱藏/顯示div。
這裡的flag是關鍵，這個變數在點選事件發生時不斷在0.1之間變化，點選一次即該函式被執行一次，即迴圈一次，也就是判斷flag的值，從而達到顯示/隱藏的效果
演示效果
未下拉時
下拉後
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。