点击平滑下拉展开折叠树形导航菜单
分类:实例代码
点击平滑下拉展开折叠树形导航菜单属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了点击展开或者折叠树形导航菜单效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> body{font-size:10.5pt;} dt{ background:#ccc; width:500px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#faq').find('dd').hide(); $('#faq').find('dt').click(function() { var answer = $(this).next(); if (answer.is(':visible')) { answer.slideUp(); } else { answer.slideDown(); } }); }); </script> </head> <body> <dl id="faq"> <dt>前端教程网</dt> <dd>欢迎来到前端教程网,希望提供良好的建议与意见</dd> <dt>前端教程</dt> <dd>div教程</dd> <dt>后台教程</dt> <dd>本站的url地址是pipipi.net</dd> </dl> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).$(document).ready(function() {}),当文档结构完全加载完毕再去执行函数中的代码。
(2).$('#faq').find('dd').hide(),隐藏dd元素,也就是隐藏二级菜单。
(3).$('#faq').find('dt').click(function() {}),为dt元素注册click事件处理函数。
(4).var answer = $(this).next(),获取点击元素的下一个元素,在本代码中就是dt元素后面的dd元素。
(5).if (answer.is(':visible')) {
answer.slideUp();
} else {
answer.slideDown();
},判断元素是否显示,如果显示就动画方式隐藏。
否则的话,就动画方式下拉。
二.相关阅读:
(1).find()参阅jQuery find()一章节。
(2).hide()参阅jQuery hide()一章节。
(3).next()参阅jQuery next()一章节。
(4).:visible参阅jQuery :visible一章节。
(5).slideUp()参阅jQuery slideUp()一章节。
点击平滑下拉展开折叠树形导航菜单,这样的场景在实际项目中还是用的比较多的,关于点击平滑下拉展开折叠树形导航菜单就介绍到这了。