声明:本博文最近发现有未解决的bug,本博主优化了一下发表了另外的文章,请看实现类似JQuery的工具函数slideDown,优化的下拉菜单
之实现类似JQuery的工具函数slideDown,优化的下拉菜单前写的文章不知道什么原因,代码是乱的,在这里重新写一下。
今天又是收获的一天,编写了一个简单下拉菜单的demo,至于其组件化就交给你们自己啦,毕竟学习是自己的事。废话不多说,这个是git地址,https://github.com/zhongjunyao/menu.git
效果图:
代码:
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>简单下拉菜单实现</title>
</head>
<body>
<ul>
<li class='level1'>
<div>一级菜单1</div>
<div class='level2'>
<div>二级菜单1</div>
<div>二级菜单1</div>
</div>
</li>
<li class='level1'>
<div>一级菜单2</div>
<div class='level2'>
<div>二级菜单2</div>
<div>二级菜单2</div>
</div>
</li>
<li class='level1'>
<div>一级菜单3</div>
<div class='level2'>
<div>二级菜单3</div>
<div>二级菜单3</div>
</div>
</li>
</ul>
</body>
</html>
css代码:
<style>
ul {
display: flex;
list-style: none;
}
.level1 {
width: 100px;
height: 30px;
background-color: skyblue;
border-right: 1px solid #000;
text-align: center;
}
.level1:last-child {
border: none;
}
.level1>div {
height: 30px;
line-height: 30px;
cursor: pointer;
}
div.level2 {
/*display:none;*/
overflow: hidden;
background-color: red;
height: 0;
transition: all .2s linear;
}
div.level2.show {
height: 60px;
}
</style>
js代码:
<script>
var addClass = (node, className) => {
var current = node.className || '';
if ((' ' + current + ' ').indexOf(' ' + className + ' ') === -1) {
node.className = current ? (current + ' ' + className) : className;
}
}
var delClass = (node, className) => {
var current = node.className || '';
node.className = (' ' + current + ' ').replace(' ' + className + ' ', ' ').trim();
}
var nav = document.getElementsByClassName('level1')
// console.log(nav);
for (var i = 0, item; item = nav[i]; i++) {
// console.log(item);
item.addEventListener('mouseenter', (e) => {
var node = e.target.getElementsByClassName('level2')[0]
// console.log(node);
addClass(node, 'show')
})
item.addEventListener('mouseleave', (e) => {
var node = e.target.getElementsByClassName('level2')[0]
delClass(node, 'show')
// console.log(node);
})
}
</script>
如果有哪位大神有不一样的或者更好的思路请留言,或者在评论中给我留来您的实现demo的链接,感激不尽。