垂直手风琴导航菜单代码实例
分类:实例代码
分享一段代码实例,它实现了垂直展开和折叠导航菜单,也被称作为手风琴导航菜单。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> * { padding: 0; margin: 0; } .accordion { width: 500px; margin: 0 auto; } .accordion > h3 { background: #5DB0D7; height: 40px; line-height: 40px; cursor: pointer; border-bottom: 1px solid white; } .accordion > div { height: 100px; width: 100%; display: none; } .accordion > div > p { height: 20px; line-height: 20px; } .accordion > h3:hover, .accordion > h3.active { background: #F26621; color: white; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { var $head = $("#accordion>h3"); var $contents = $("#accordion>div"); $head.first().addClass('active').next().slideDown('normal'); $head.on('click', function (event) { event.preventDefault(); if ($(this).attr('class') != 'active') { $contents.slideUp('normal'); $(this).next().stop(true, true).slideToggle('normal'); $head.removeClass('active'); $(this).addClass('active'); } }); }) </script> </head> <body> <div id="accordion" class="accordion"> <h3>前端教程网一</h3> <div> <p>内容一</p> </div> <h3>前端教程网二</h3> <div> <p>内容二</p> </div> <h3>前端教程网三</h3> <div> <p>www.pipipi.net</p> </div> <h3>前端教程网四</h3> <div> <p>jquery教程</p> </div> </div> </body> </html>
上面的代码实现了我们的要求,代码比较简单,更多内容可以参阅相关阅读。
相关阅读:
(1).first()可以参阅jQuery first()一章节。
(2).addClass()可以参阅jQuery addClass()一章节。
(3).next()可以参阅jQuery next()一章节。
(4).slideDown()可以参阅jQuery slideDown()一章节。
(6).slideToggle()可以参阅jQuery slideToggle()一章节。
(7).removeClass()可以参阅jQuery removeClass()一章节。
垂直手风琴导航菜单代码实例,这样的场景在实际项目中还是用的比较多的,关于垂直手风琴导航菜单代码实例就介绍到这了。
垂直手风琴导航菜单代码实例属于前端实例代码,有关更多实例代码大家可以查看。