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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 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
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
php在字符串中查找另一个字符串
2008/11/19 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP连接局域网MYSQL数据库的简单实例
2013/08/26 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
JavaScript 图像动画的小demo
2012/05/23 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
JS判定是否原生方法
2013/07/22 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
python matplotlib坐标轴设置的方法
2017/12/05 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
python入门教程之基本算术运算符
2020/11/13 Python
python 数据类型强制转换的总结
2021/01/25 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
水果超市创业计划书
2014/01/27 职场文书
运动会通讯稿150字
2014/02/15 职场文书
小学班主任寄语大全
2014/04/04 职场文书
嘉宾邀请函
2015/01/31 职场文书
邀请函范文
2015/02/02 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
如何使用PyCharm及常用配置详解
2021/06/03 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS