jQuery侧边栏实现代码


Posted in Javascript onMay 06, 2016

先给大家展示下实现效果图,如果亲感觉是您想要的效果,请参考本代码。

jQuery侧边栏实现代码

实现代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript菜单侧边展开(改良版)</title>
</head>
<body>
<ul id="navigation">
<li><a href="#">系统管理</a>
<ul>
<li><a href="#">地区设置</a></li>
<li><a href="#">分行设置</a></li>
<li><a href="#">银行操作用户设置</a></li>
<li><a href="#">密码修改</a></li>
</ul>
</li>
<li><a href="#">学校管理</a>
<ul>
<li><a href="#">学校设置</a></li>
<li><a href="#">学校查询</a></li>
</ul>
</li>
<li><a href="#">基础信息管理</a></li>
<li><a href="#">统计系统查询</a></li>
</ul>
<script src="jquery-1.11.1.js"></script>
<script>
var $j = jQuery.noConflict();
$j(function(){
var lis = document.getElementById("navigation").getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis[i].onmouseover=function() {
var subMenu = this.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
var subcolor = this.getElementsByTagName("a")[0];
subcolor.style.background = "lightblue";
}
lis[i].onmouseout=function() {
var subMenu = this.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
var subcolor = this.getElementsByTagName("a")[0];
subcolor.style.background = "";
}
}
});
</script>
<script src="jquery-1.11.1.js"></script>
</body>
</html>

以上是本文给大家介绍的jquery侧边栏代码,希望对大家有所帮助!同时也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
js面向对象之公有、私有、静态属性和方法详解
Apr 17 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
BootStrap中的表单大全
Sep 07 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
JavaScript回调函数callback用法解析
Jan 14 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 Javascript
BootStrap制作导航条实例代码
May 06 #Javascript
jQuery实现下拉框功能实例代码
May 06 #Javascript
jQuery 实现评论等级好评差评特效
May 06 #Javascript
Node.js插件安装图文教程
May 06 #Javascript
node.js插件nodeclipse安装图文教程
Oct 19 #Javascript
javascript实现平滑无缝滚动
Aug 09 #Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 #Javascript
You might like
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
解析CodeIgniter自定义配置文件
2013/06/18 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
php cookie 详解使用实例
2016/11/03 PHP
基于jQuery实现的当离开页面时出现提示的实现代码
2011/06/27 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
动物科学专业毕业生的自我评价
2013/11/29 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
生物制药自我鉴定
2014/01/25 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
工作一年自我鉴定
2019/06/20 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
python实现批量移动文件
2021/04/05 Python
Java spring定时任务详解
2021/10/05 Java/Android
Redis集群节点通信过程/原理流程分析
2022/03/18 Redis