jquery 动态菜单的实现代码分享
发布时间：2015-10-29 编辑：jiaochengji.com
本文介绍下，用jquery实现动态菜单的一个例子，有需要的朋友，参考下吧。
用jquery实现动态菜单的方式，与jquery弹出窗口的方式差不多，都是借助JavaScript操作css样式表来呈现。
也是分为三个步骤。
1，创建一个含有菜单的html页
<html> <head> <title>jquery动态菜单-www.jbxue.com</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/menu.css" mce_href="css/menu.css"> <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script> <mce:script type="text/javascript" src="jslib/jquerymenu.js" mce_src="jslib/jquerymenu.js"></mce:script> </head> <body> <ul> <a href="#" mce_href="#">菜单1</a> <li>子菜单1</li> <li>子菜单2</li> </ul> <ul> <a href="#" mce_href="#">菜单2</a> <li>子菜单3</li> <li>子菜单4</li> </ul> <div id="content"></div> </body> </html>2，创建控制菜单显示的css文件
/*让所有的li都不显示小圆点，可以使用css标签选择器*/ li{ /*使list前的小圆点消失*/ list-style: none; /*缩进效果*/ margin-left: 18px; /*隐藏菜单*/ display: none; } a{ /*文字的显示方式*/ text-decoration: none; }3，创建控制菜单显示的JavaScript文件
<script> /* * 点击主菜单，子菜单显示；再次点击主菜单，子菜单隐藏 * 需要编写代码，使得主菜单在装载时添加onclick事件，使得点击主菜单可以显示子菜单 * 注册页面装载时执行的方法 * edit by www.jbxue.com */ $(document).ready(function(){ //var uls = $("ul"); //找到ul下的a节点 var as = $("ul > a"); as.click(function(){ //首先找到当前ul中的li，然后让li显示出来 //获取当前被点击的ul节点 var aNode = $(this); //找到被点击ul节点下的所有li节点 var lis = aNode.nextAll("li"); //显示或隐藏ul的li子节点们 lis.toggle("slow"); }); }); </script>您可能感兴趣的文章：
jquery 动态菜单的实现代码分享
7款风格新颖的jQuery/CSS3菜单导航分享
jquery实现动态菜单的实例代码
Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)
jquery下拉菜单 ul标签下拉菜单的例子
jquery animate()函数实现菜单折叠效果
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
jquery遮罩层效果实现导航菜单代码
jQuery版仿Path菜单效果
jquery统计子菜单条数的实现代码
[关闭]