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 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 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
星际争霸中的对战模式介绍
2020/03/04 星际争霸
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
js监听input输入框值的实时变化实例
2017/01/26 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
python实现RSA加密(解密)算法
2016/02/17 Python
python-str,list,set间的转换实例
2018/06/27 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Python中Selenium库使用教程详解
2020/07/23 Python
深入浅析Python代码规范性检测
2020/07/31 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
司机岗位职责
2013/11/15 职场文书
保密工作责任书
2014/04/16 职场文书
商务经理岗位职责
2014/08/03 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
收银员岗位职责
2015/02/03 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
python四种出行路线规划的实现
2021/06/23 Python