代码描述:jQuery垂直可伸缩 导航菜单。jQuery垂直可伸缩导航菜单代码下载
可以伸缩的才会垂直导航菜单在网站中有大量的使用,为了节省空间,一般情况下,只有第一个菜单是展开的,其他都是折叠的,只有当点击其他主菜单的时候才会被展开,下面就通过实例代码来介绍一下如何实现此功能。 代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>垂直可伸缩的导航菜单实例代码-51前端</title> <style type="text/css"> *{ margin:0px; padding:0px; } div{ border:1px solid black; width:100px; font-size:12px; margin:50px auto; } ul{list-style-type:none;} .title{ background-color:#0094ff; border-bottom:1px solid White; color:White; padding:2px 2px; cursor:pointer; font-size:14px; text-align:center } .menu .content li{ height:25px; line-height:25px; text-align:center; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $(".content").hide(); $(".title").click(function(){ $(this).next().slideDown().parent().siblings().children(".content").slideUp(); }).first().next().slideDown(); }); </script> </head> <body> <div> <ul class="menu"> <li class="title">主菜单一</li> <li class="content"> <ul> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> <li>51前端四</li> </ul> </li> </ul> <ul class="menu"> <li class="title">主菜单二</li> <li class="content"> <ul> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> <li>51前端四</li> </ul> </li> </ul> <ul class="menu"> <li class="title">主菜单三</li> <li class="content"> <ul> <li>51前端一</li> <li>51前端二</li> <li>51前端三</li> <li>51前端四</li> </ul> </li> </ul> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能