js实现下拉菜单栏

lewis 7年前 (2018-08-03) 阅读数 11 #程序编程

文章标签 js

下拉菜单栏的实现可以使用JavaScript和HTML结合来完成。以下是一个基本的下拉菜单栏实现示例：

<!DOCTYPEhtml><html>
<head>
<style>
.dropdown{
position:relative;
display:inline-block;
}
.dropdown-content{
display:none;
position:absolute;
min-width:160px;
z-index:1;
}
.dropdown:hover.dropdown-content{
display:block;
}
</style>
</head>
<body>
<divclass="dropdown">
<button>点击我</button>
<divclass="dropdown-content">
<ahref="#">选项1</a>
<ahref="#">选项2</a>
<ahref="#">选项3</a>
</div>
</div>
<script>
//获取下拉菜单元素
constdropdown=document.querySelector('.dropdown');
//鼠标点击菜单外部时，隐藏下拉菜单
document.addEventListener('click',function(event){
if(!dropdown.contains(event.target)){
constdropdownContent=dropdown.querySelector('.dropdown-content');
dropdownContent.style.display='none';
}
});
//鼠标点击按钮时，显示或隐藏下拉菜单
constbutton=dropdown.querySelector('button');
button.addEventListener('click',function(){
constdropdownContent=dropdown.querySelector('.dropdown-content');
dropdownContent.style.display=dropdownContent.style.display==='block'?'none':'block';
});
</script>
</body>
</html>