首页 > 代码库 > jQuery 菜单栏 展开与收缩例子
jQuery 菜单栏 展开与收缩例子
废话少说,上代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>测试 查找下一个元素</title> <script src="http://www.mamicode.com/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#menu ul li:first ul").show(); $("#menu ul li:gt(0) ul").hide(); $("#menu li a.parentMenu").click(function () { if ($(this).next(".childMenu").is(":hidden")) { $("ul .childMenu").hide(); $(this).next(".childMenu").show(); } else { $("ul .childMenu").hide(); $(this).next(".childMenu").hide(); } }); }); </script> </head> <body> <div id="menu"> <ul> <li><a href="http://www.mamicode.com/#" class="parentMenu">一级菜单A</a> <ul class="childMenu"> <li>A的子菜单</li> <li>A的子菜单</li> <li>A的子菜单</li> <li>A的子菜单</li> </ul> </li> <li><a href="http://www.mamicode.com/#" class="parentMenu">一级菜单B</a> <ul class="childMenu"> <li>B的子菜单</li> <li>B的子菜单</li> <li>B的子菜单</li> <li>B的子菜单</li> </ul> </li> <li><a href="http://www.mamicode.com/#" class="parentMenu">一级菜单C</a> <ul class="childMenu"> <li>C的子菜单</li> <li>C的子菜单</li> <li>C的子菜单</li> <li>C的子菜单</li> </ul> </li> <li><a href="http://www.mamicode.com/#" class="parentMenu">一级菜单D</a> <ul class="childMenu"> <li>D的子菜单</li> <li>D的子菜单</li> <li>D的子菜单</li> <li>D的子菜单</li> </ul> </li> </ul> </div> </body> </html>
做一个笔记,主要记一下jQuery选择器 如何选中 下一个元素,如何选择 元素集中指定某个或者某几个元素
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。