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 Object中间的key
Nov 18 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
jquery+css实现侧边导航栏效果
Jun 12 jQuery
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 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&amp;mysql(一)
2006/10/09 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
关于jQuery的inArray 方法介绍
2011/10/08 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
JavaScript实现的伸展收缩型菜单代码
2015/10/14 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
js实现无缝轮播图
2020/03/09 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
python获取图片颜色信息的方法
2015/03/18 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
python Zmail模块简介与使用示例
2020/12/19 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
两年的个人工作自我评价
2014/01/10 职场文书
人力资源主管职责范本
2014/03/05 职场文书
理财学专业自荐书
2014/06/28 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
用Python将库打包发布到pypi
2021/04/13 Python