When I was studying the front end last year, I used jQuery to realize the collapsible menu. At that time, I also wrote this article
" The collapsible menu realized by jQuery "
. In the past two days, I learned javascript and tried to use js to realize the collapsible menu. The idea is as follows:
1. In the initial state, the height of each hyperlink in the submenu is 0, the bottom border is 0, and the background image is a plus sign; 2.
When the mouse is clicked, the height is 38px, the bottom border is 1 pixel, gray, and the background image is
3. Use conditional statements to judge the state and switch between the two states;
4. When using the exclusive idea, the current element expands, and other sibling elements collapse; 5.
Use transition attribute in css to realize gradient transition.
The complete code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>折叠式菜单特效</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 100px;
width: 223px;
}
.menu_head {
width: 223px;
height: 46px;
line-height: 46px;
padding-left: 38px;
font-size: 16px;
color: #475050;
cursor: pointer;
border: 1px solid #e0e0e0;
font-weight: bold;
background-color: #f0f0f0;
background-image: url(img/pro_plus.png);
background-position: right center;
background-repeat: no-repeat;
}
.current {
background-image: url(img/pro_down.png);
}
.menu_body {
border-left: 1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
width: 223px;
}
.menu_body a {
width: 223px;
padding-left: 38px;
display: block; /*不能去掉，只有是block，高度才有效*/
line-height: 38px;
color: #666;
text-decoration: none;
overflow: hidden; /*与高度为0 结合，溢出的部分隐藏*/
height: 0px; /*高度0*/
transition: all .3s;
}
.bt{
border-bottom: 1px solid #e0e0e0;
}
</style>
</head>
<body>
<ul class="menu_list">
<li>
<dl class="menu_head">HTML语言</dl>
<dt class="menu_body">
<a href="#">HTML基础</a>
<a href="#">图像和超链接</a>
<a href="#">列表和表格</a>
<a href="#">音频和视频</a>
</dt>
</li>
<li>
<dl class="menu_head">CSS样式表</dl>
<dt class="menu_body">
<a href="#">CSS基础</a>
<a href="#">字体文本属性</a>
<a href="#">超链接样式</a>
<a href="#">列表样式</a>
<a href="#">表格样式</a>
<a href="#">表单样式</a>
</dt>
</li>
<li>
<dl class="menu_head">网页布局案例</dl>
<dt class="menu_body">
<a href="#">登陆页面的制作</a>
<a href="#">入驻页面的制作</a>
<a href="#">招生信息网</a>
<a href="#">美妆网页</a>
</dt>
</li>
<li>
<dl class="menu_head">JavaScript</dl>
<dt class="menu_body">
<a href="#">JS的基础语法 </a>
<a href="#">BOM对象</a>
<a href="#" class="bt">DOM对象</a>
</dt>
</li>
</ul>
<script type="text/javascript">
var list = document.querySelector('.menu_list');
var menus = list.querySelectorAll('.menu_head');
for (let i = 0; i < menus.length; i++) {
menus[i].addEventListener('click', function() {
alinks = this.nextElementSibling.children;
if (this.className == 'menu_head') {
this.className = 'menu_head current';
for (let k = 0; k < alinks.length; k++) {
alinks[k].style.height = '38px';
alinks[k].style.borderBottom='1px solid #e0e0e0';
}
} else {
this.className = 'menu_head';
for (let k = 0; k < alinks.length; k++) {
alinks[k].style.height = '0';
alinks[k].style.borderBottom='0';
}
}
for (let j = 0; j < menus.length; j++) {
//排他思想
if (j != i) {
menus[j].className = 'menu_head';
alist = menus[j].nextElementSibling.children;
for (let k = 0; k < alist.length; k++) {
alist[k].style.height = '0';
alist[k].style.borderBottom='0';
}
}
}
})
}
</script>
</body>
</html>