标签：
jQuery如何实现点击下拉菜单的隐藏和显示:
在众多的网站都有这样的效果，那就是点击一个父菜单就会显示下拉子菜单，再点击父菜单，那么子菜单就会隐藏，下面就简单介绍一下如何实现此中效果。这里只介绍如何使用jQuery实现此效果，暂且不考虑效果的美观度，代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title> <style type="text/css"> *{ margin:0px; padding:0px; font-size:14px; } ul{ list-style:none; } .main .nav{ width:100px; margin:0px auto; margin-top:3px; } .main .nav a{ width:100px; height:25px; line-height:25px; text-align:center; text-decoration:none; background-color:green; display:block; } .main .nav .navcontent{ display:none; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ var navs=$(".nav"); var navcontents=$(".navcontent"); var navlen=navs.length; $(".nav a").click(function(){ if($(this).siblings().css("display")=="none"){ $(this).siblings().css("display","block") } else{ $(this).siblings().css("display","none") } }) }) </script> </head> <body> <div> <ul class="main"> <li class="nav"> <a href="#">蚂蚁部落</a> <ul class="navcontent"> <li>搜索优化</li> <li>CSS专区</li> <li>ASP专区</li> </ul> </li> <li class="nav"> <a href="#">前台专区</a> <ul class="navcontent"> <li>搜索优化</li> <li>CSS专区</li> <li>ASP专区</li> </ul> </li> <li class="nav"> <a href="#">后台专区</a> <ul class="navcontent"> <li>搜索优化</li> <li>CSS专区</li> <li>ASP专区</li> </ul> </li> </ul> </div> </body> </html>
以上代码实现了点击导航栏主菜单实现二级菜单的隐藏域显示效果。以上代码并不够美观，可能还有许多改进的地方，这里只是提供了一种实现此效果的思想。由于jQuery2.0不再支持toggle()函数，所以这里没有使用。
原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0504/670.html
标签：
原文地址：http://www.cnblogs.com/softwhy/p/4639487.html
