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 相关文章推荐
js 控制页面跳转的5种方法
Sep 09 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
javascript动画算法实例分析
Jul 31 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
详解react-redux插件入门
Apr 19 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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开发框架的对比
2013/07/05 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
Yii框架登录流程分析
2014/12/03 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
python学生管理系统
2019/01/30 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python super()方法原理详解
2020/03/31 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
秘书英文求职信范文
2014/01/31 职场文书
亮剑精神观后感
2015/06/05 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL