jquery实现动态菜单的实例代码
2023-06-13 09:15:13 时间
jquery实现动态菜单的方式跟jquery弹出窗口的方式差不多,都是采用JavaScript操作css的方式。
其具体步骤可以分为以下几步:
•创建一个含有要表达的菜单的html页面
<html>
<head>
<title>jquery示例2:jquery菜单</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<linktype="text/css"rel="stylesheet"href="css/menu.css"mce_href="css/menu.css">
<mce:scripttype="text/javascript"src="jslib/jquery.js"mce_src="jslib/jquery.js"></mce:script>
<mce:scripttype="text/javascript"src="jslib/jquerymenu.js"mce_src="jslib/jquerymenu.js"></mce:script>
</head>
<body>
<ul>
<ahref="#"mce_href="#">我是菜单1</a>
<li>我是子菜单1</li>
<li>我是子菜单2</li>
</ul>
<ul>
<ahref="#"mce_href="#">我是菜单2</a>
<li>我是子菜单3</li>
<li>我是子菜单4</li>
</ul>
<divid="content"></div>
</body>
</html>
•创建一个css文件来控制菜单的显示
/*让所有的li都不显示小圆点,可以使用css标签选择器*/
li{
/*使list前的小圆点消失*/
list-style:none;
/*缩进效果*/
margin-left:18px;
/*隐藏菜单*/
display:none;
}
a{
/*文字的显示方式*/
text-decoration:none;
}
•创建一个JavaScript文件来控制菜单的显示
/*
*点击主菜单,子菜单显示;再次点击主菜单,子菜单隐藏
*需要编写代码,使得主菜单在装载时添加onclick事件,使得点击主菜单可以显示子菜单
*注册页面装载时执行的方法
*/
$(document).ready(function(){
//varuls=$("ul");
//找到ul下的a节点
varas=$("ul>a");
as.click(function(){
//首先找到当前ul中的li,然后让li显示出来
//获取当前被点击的ul节点
varaNode=$(this);
//找到被点击ul节点下的所有li节点
varlis=aNode.nextAll("li");
//显示或隐藏ul的li子节点们
lis.toggle("slow");
});
});
相关文章
- jquery监听浏览器刷新_jQuery刷新浏览器页面大小
- jQuery图片切换插件jquery.cycle.js详解编程语言
- JQuery运用ajax注册用户实例(后台asp.net)
- jquery异步请求实例代码
- jquery入门—选择器实现隔行变色实例代码
- JQuery动画和停止动画实例代码
- JQuery操作tr和td内容的方法实例
- jQuery实现表头固定效果的实例代码
- jquery利用ajax调用后台方法实例
- jquery中邮箱地址URL网站地址正则验证实例代码
- jquery数据验证插件(自制,简单,练手)实例代码
- jquery获取一组checkbox的值(实例代码)
- jquery隐藏标签和显示标签的实例
- 基于jquery异步传输json数据格式实例代码
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
- 三种动态加载js的jquery实例代码另附去除js方法
- jquery中$.expr使用实例介绍
- jquery的ajax异步请求接收返回json数据实例
- Jquery基于Ajax方法自定义无刷新提交表单Form实例
- jQuery+ajax中getJSON()用法实例
- jQuery圆形统计图开发实例
- 限制上传文件大小和格式的jQuery插件实例
- jQuery制作简单柱状图实例