js实现的折叠式菜单

去年学习前端的时候，用jQuery实现了折叠式菜单，当时还写了这篇文章
《jQuery实现的折叠式菜单》
这两天学javascript，又尝试用js实现折叠式菜单。思路如下：
1.初始状态，让子菜单的各个超链接高度为0，下边框为0，背景图片为加号；
2.当鼠标点击时，高度为38px，下边框1像素、灰色，背景图片为减号；
3.使用条件语句判断状态，在两种状态间切换；
4.使用排他思想时当前元素展开，其他兄弟元素折叠；
5.css中使用transition属性实现渐变过渡。
完整代码如下：

<!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>

js实现的折叠式菜单相关推荐

一款由css3和jquery实现的卡面折叠式菜单
之前已经为大家介绍了好多导航菜单.今天为大家再带来一款由css3和jquery实现的卡片折叠式菜单.当菜单关闭的时候,有三维堆叠的效果.我们一起看下效果图: 在线预览源码下载 html代码: & ...
jquery实现的折叠式菜单（手风琴式菜单）
最近学习jquery,从网上找了一段实现折叠式菜单的代码,发现实现的不够理想,整明白后改写了一下.效果如下: 完整代码如下: <!DOCTYPE html> <html>< ...
折叠式菜单 html,JQuery实现折叠式菜单的详细代码
两种风格: 1:点菜单项,每个子菜单项都可显示 30秦甜甜_实训13-2_2_180701802230_18计算机2班 * { padding: 0; margin: 0; list-style: n ...
CSS+JS灰色树型菜单导航代码
代码简介: CSS+JS打造的树型菜单,没有怎么美化,颜色看上去也不很美,提供一种思路,真想用的朋友好好修改一下颜色,里面都有注释,相信通过你的努力,它最终的效果一定很漂亮. 代码内容: <!D ...
JS左侧竖向滑动菜单
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS左侧竖向滑动菜单 - w ...
关于FlexPaper 2.1.2版本二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单等相关问题...
原文:关于FlexPaper 2.1.2版本二次开发 Logo .打印.搜索.缩略图.添加按钮.js交互.右键菜单等相关问题先废话几句.最近用到文档在线浏览功能,之前用的是print2flash( ...
html鼠标平滑滚动效果,JS特效代码 JS动态平滑滚动菜单效果
JS特效代码 JS动态平滑滚动菜单效果 www.css5.net body {cursor:crosshair; background:#111; margin:0; padding:0; posit ...
【荐】自己做一款不错的JS+CSS多级导航菜单
代码简介: 自己做一款不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 代码内容: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
JS省市二级联动菜单,sky整理收集。
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

js实现的折叠式菜单

js实现的折叠式菜单相关推荐

最新文章

热门文章