JavaScript下拉折叠导航菜单讲解
JavaScript下拉折叠导航菜单讲解属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它利用原生js实现了下拉折叠导航菜单效果。
并且详细介绍一下它的实现过程,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { margin: 0px auto; padding: 0px; } ul { margin: 0px; padding: 0px; width: 150px; } li { list-style-type: none; margin: 0px; padding: 0px; } .leftSidebar { margin: 0px auto; width: 500px; } .lmName { display: block; width: 150px; background: #f9f9f9; height: 30px; border: 1px solid #e5e5e5; padding-left: 15px; line-height: 30px; } .ejlmUl { display: none; width: 165px; border: 1px solid #e5e5e5; } .ejlmUl li { border-bottom: 1px dashed #e5e5e5; padding-left: 15px; font-size: 12px; line-height: 24px; } .action { display: block; } </style> <script type="text/javascript"> function left(){ var lmName = document.getElementsByClassName('lmName'); for (var index = 0; index < lmName.length; index++) { lmName[index].index = index; lmName[index].onclick = function () { allNone(); var ejlmUl = document.getElementsByClassName('ejlmUl'); ejlmUl[this.index].style.display = 'block'; } } } function allNone(){ var ejlmUl = document.getElementsByClassName('ejlmUl'); for (var index = 0; index < ejlmUl.length; index++) { ejlmUl[index].style.display = 'none'; } } window.onload = function () { left(); } </script> </head> <body> <div class="leftSidebar"> <ul id="leftUl"> <li> <a class="lmName">前端教程网一</a> <ul class="ejlmUl action"> <li class="ejlm">栏目11</li> <li class="ejlm">栏目11</li> <li class="ejlm">栏目11</li> <li class="ejlm">栏目11</li> </ul> </li> <li> <a class="lmName">前端教程网二</a> <ul class="ejlmUl"> <li class="ejlm">栏目22</li> <li class="ejlm">栏目22</li> <li class="ejlm">栏目22</li> <li class="ejlm">栏目22</li> </ul> </li> <li> <a class="lmName">前端教程网三</a> <ul class="ejlmUl"> <li class="ejlm">栏目33</li> <li class="ejlm">栏目33</li> </ul> </li> </ul> </div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function left(){},此函数实现了批量注册事件处理函数功能。
(2).var lmName = document.getElementsByClassName('lmName'),获取class属性值为lmName的元素集合。
(3).for (var index = 0; index < lmName.length; index++) ,通过for循环批量注册事件处理函数。
(4).lmName[index].index = index,为当前元素添加一个index自定义属性,并赋值为当前元素的索引。
(5).lmName[index].onclick = function () {},为当前元素注册click事件处理函数。
(6).allNone(),此函数可以将所有的菜单折叠。
(7).var ejlmUl = document.getElementsByClassName('ejlmUl'),获取class属性值为ejlmUl的元素集合。
(8).ejlmUl[this.index].style.display = 'block',将对应索引的元素显示出来。
二.相关阅读:
(1).document.getElementsByClassName()参阅document. getElementsByClassName()一章节。
(2).onclick参阅javascript click事件一章节。
JavaScript下拉折叠导航菜单讲解,这样的场景在实际项目中还是用的比较多的,关于JavaScript下拉折叠导航菜单讲解就介绍到这了。