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 相关文章推荐
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
JS实现搜索关键词的智能提示功能
Jul 07 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
express异步函数异常捕获示例详解
Nov 30 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判断变量类型常用方法
2012/04/24 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
php图片添加水印例子
2016/07/20 PHP
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
2009/09/19 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
分享6个隐藏的python功能
2017/12/07 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Python 随机按键模拟2小时
2020/12/30 Python
临床医学应届生求职信
2013/11/06 职场文书
英语专业应届生求职信范文
2013/11/15 职场文书
测试工程师岗位职责
2013/11/28 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年科研工作总结
2014/12/03 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
python树莓派通过队列实现进程交互的程序分析
2021/07/04 Python
python实现MD5进行文件去重的示例代码
2021/07/09 Python