Jquery和ajax开发案例之---弹出菜单
2014-04-19 16:41
337 查看
案例(浮动窗口 、动态股票信息、弹出菜单、可编辑的表格 、自动补全输入框)下载地址:
http://download.csdn.net/detail/zl594389970/7218687
效果图:
html代码:
jquerymenu.js代码:
menu.css代码:
http://download.csdn.net/detail/zl594389970/7218687
效果图:
html代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>JQuery实例:弹出菜单</title> <script type="text/javascript" src="js/jquery-1.3.1.js"></script> <script type="text/javascript" src="js/jquerymenu.js"> </script> <link rel="stylesheet" type="text/css" href="css/menu.css"> </head> <body> <ul> <a href="#">菜单</a> <li><a href="#" id="JqueryWindow.html">菜单1</a></li> <li><a href="#" id="JqueryWindow.html">菜单1</a></li> <li><a href="#">菜单1</a></li> <li><a href="#">菜单1</a></li> </ul> <ul> <a href="#">菜单</a> <li><a href="#" id="second">菜单1</a></li> <li><a href="#">菜单1</a></li> <li><a href="#">菜单1</a></li> <li><a href="#">菜单1</a></li> </ul> <div id="content"></div> </body> </html>
jquerymenu.js代码:
//页面装载是执行 $(document).ready(function () { //先找到所有的住菜单 var uls = $("ul"); //找到主菜单中的a节点 var as = $("ul>a"); //为所a注册单击事件 as.click(function() { //找到当前被点击的a节点 var aNode=$(this); //找到当前a节点的所有兄弟节点 var lis = aNode.nextAll("li");/* //找到当前ul节点中所有li子节点 var lis = ulNode.children("li");*/ //显示和隐藏交替 lis.toggle(); }); $("li>a").click(function() { //当点击a时将id中的页面加载到content中 $("#content").load($(this).attr("id")); }); });
menu.css代码:
li{ list-style-type : none; padding-left: 5px; display: none; text-decoration: none; } a{ text-decoration: none; }
相关文章推荐
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五--模块(菜单)管理源码分享
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享
- 【JavaWeb开发】使用Jquery与Ajax实现动态联级菜单
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五--模块(菜单)管理源码分享 推荐
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之五--模块(菜单)管理源码分享
- jQuery-ajax实现的弹出菜单效果
- Jquery和ajax开发案例之---浮动窗口
- Jquery和ajax开发案例之---可编辑的表格
- JavaWeb开发之使用jQuery与Ajax实现动态联级菜单效果
- Jquery和ajax开发案例之---动态股票信息
- Jquery和ajax开发案例之---自动补全输入框
- python开发学习-day14(jquery、ajax等)
- 使用jQuery开发超酷带有背景波浪动画的单页面网站导航菜单
- 开发一个jQuery插件——多级联动菜单
- 使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享
- Win10开发:Flyout的使用及长按弹出菜单的实现
- 使用jquery简化ajax开发
- jquery多功能弹出层插件支持Ajax、确认对话框、二次弹出层等
- jQuery实例(ajax通信和动态加载二级菜单)