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 getElementsByClassName函数
Apr 01 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
Sep 12 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
JavaScript中的Truthy和Falsy介绍
Jan 01 Javascript
javascript实现Table排序的方法
May 15 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 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开发的一些注意点总结
2010/10/12 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
详解YII关联查询
2016/01/10 PHP
Laravel框架实现model层的增删改查(CURD)操作示例
2018/05/12 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
jquery+ajax实现直接提交表单实例分析
2016/06/17 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
函授大专自我鉴定
2013/11/01 职场文书
医学护理毕业生自荐信
2013/11/07 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
会计师事务所实习证明
2014/11/16 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
vue项目支付功能代码详解
2022/02/18 Vue.js
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android