用最简单的原生javascript写出下拉菜单的效果！

最新推荐文章于 2024-04-02 06:20:55 发布

拉普拉斯坏

最新推荐文章于 2024-04-02 06:20:55 发布

阅读量378

点赞数

分类专栏：程序设计文章标签： javascript 前端下拉菜单 tabbor导航 html

本文链接：https://blog.csdn.net/MISTLETOE_WW/article/details/86556171

版权

12 篇文章 0 订阅

订阅专栏

因为最近考试要考下拉菜单，然后我综合了网上各路大神的各种绝招。发现了这款最简单的实现方法。

先上代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<style>

ul{
list-style: none;
}
.aa{
width: 400px;
height: 30px;
background-color: greenyellow;
}
.aa ul{

}
.bb{
float: left;
width: 50px;
border: 1px solid #000000;
margin-left: 10px;

}
.cc {
background-color: grey;
display: block;
padding-left:2px;
display: none;
}

</style>

</div>
</body>
</html>

function displaySubMenu(li) {

var subMenu = li.getElementsByTagName("ul")[0];

subMenu.style.display = "block";

}

function hideSubMenu(li) {

var subMenu = li.getElementsByTagName("ul")[0];

subMenu.style.display = "none";

}
</script>

首先是基本的布局，此处用了双层的ul和li的布局。代码很简单，javascript实际上就只有两行。美中不足是下拉菜单的点击事件写在HTML中。

关注