菜单栏伸缩（附jquery-1.12.1.js）
Css:
<style type="text/css">
.leftMenu {
min-width:220px;
width:268px;
margin:40px auto 0 auto;
}
.menu {
border: #bdd7f2 1px solid;
border-top: #0080c4 4px solid;
border-bottom: #0080c4 4px solid;
background: #f4f9ff repeat-y right;
margin-left: 10px;
}
.menu .ListTitle {
border-bottom: 1px #98c9ee solid;
display: block;
text-align: center;
/*position: relative;*/
height: 38px;
line-height: 38px;
cursor: pointer;
/*+min-width:220px;*/ +width:100%;
} .ListTitlePanel {
position: relative;
}
.leftbgbt {
position: absolute;
background: no-repeat;
width: 11px;
height: 52px;
left: -11px;
top: -4px;
}
/*.leftbgbt {
float:left;
background: no-repeat;
width: 11px;
height: 52px;
left: 0px;
top: 0px;
zoom:1;
z-index:200px;
}
*/
.leftbgbt2 {
position: absolute;
background: no-repeat;
width: 11px;
height: 48px;
left: -11px;
top: -1px;
}
.menuList {
display: block;
height: auto;
}
.menuList div {
height: 28px;
line-height: 24px;
border-bottom: 1px #98c9ee dotted;
}
.menuList div a {
display: block;
background: #fff;
line-height: 28px;
height: 28px;
text-align: center;
color: #185697;
text-decoration: none;
}
.menuList div a:hover {
color: #f30;
background: #0080c4;
color: #fff;
}
</style>
Javascript:
$(document).ready(function() {
var menuParent = $('.menu > .ListTitlePanel > div');//获取menu下的父层的DIV
var menuList = $('.menuList');
$('.menu > .menuParent > .ListTitlePanel > .ListTitle').each(function(i) {//获取列表的大标题并遍历
$(this).click(function(){
if($(menuList[i]).css('display') == 'none'){
$(menuList[i]).slideDown(300);
}
else{
$(menuList[i]).slideUp(300);
}
});
});
});
Html主体：
<div class="leftMenu">
<div class="menu"> <div class="menuParent">
<div class="ListTitlePanel">
<div class="ListTitle">
<strong>统计表在线填报</strong>
<div class="leftbgbt"> </div>
</div>
</div>
<div class="menuList">
<div> <a target="mainAction" href="${pageContext.request.contextPath}/admin/addUser.jsp">封面</a></div>
<div> <a target="mainAction" href="${pageContext.request.contextPath}/admin/addUser.jsp">三、人员情况</a></div>
</div>
</div>
</div>
</div>
jquery-1.12.1.js 下载地址：
https://pan.baidu.com/s/1r23gV2pZHZyh6RdFBqhm2w
提取码：p12f
完整代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.leftMenu {
min-width:220px;
width:268px;
margin:40px auto 0 auto;
}
.menu {
border: #bdd7f2 1px solid;
border-top: #0080c4 4px solid;
border-bottom: #0080c4 4px solid;
background: #f4f9ff repeat-y right;
margin-left: 10px;
}
.menu .ListTitle {
border-bottom: 1px #98c9ee solid;
display: block;
text-align: center;
/*position: relative;*/
height: 38px;
line-height: 38px;
cursor: pointer;
/*+min-width:220px;*/ +width:100%;
} .ListTitlePanel {
position: relative;
}
.leftbgbt {
position: absolute;
background: no-repeat;
width: 11px;
height: 52px;
left: -11px;
top: -4px;
}
/*.leftbgbt {
float:left;
background: no-repeat;
width: 11px;
height: 52px;
left: 0px;
top: 0px;
zoom:1;
z-index:200px;
}
*/
.leftbgbt2 {
position: absolute;
background: no-repeat;
width: 11px;
height: 48px;
left: -11px;
top: -1px;
}
.menuList {
display: block;
height: auto;
}
.menuList div {
height: 28px;
line-height: 24px;
border-bottom: 1px #98c9ee dotted;
}
.menuList div a {
display: block;
background: #fff;
line-height: 28px;
height: 28px;
text-align: center;
color: #185697;
text-decoration: none;
}
.menuList div a:hover {
color: #f30;
background: #0080c4;
color: #fff;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var menuParent = $('.menu > .ListTitlePanel > div');//获取menu下的父层的DIV
var menuList = $('.menuList');
$('.menu > .menuParent > .ListTitlePanel > .ListTitle').each(function(i) {//获取列表的大标题并遍历
$(this).click(function(){
if($(menuList[i]).css('display') == 'none'){
$(menuList[i]).slideDown(300);
}
else{
$(menuList[i]).slideUp(300);
}
});
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body> <div class="leftMenu">
<div class="menu"> <div class="menuParent">
<div class="ListTitlePanel">
<div class="ListTitle">
<strong>统计表在线填报</strong>
<div class="leftbgbt"> </div>
</div>
</div>
<div class="menuList">
<div> <a target="mainAction" href="${pageContext.request.contextPath}/admin/addUser.jsp">封面</a></div>
<div> <a target="mainAction" href="${pageContext.request.contextPath}/admin/addUser.jsp">三、人员情况</a></div>
</div>
</div>
</div>
</div> </body>
</html>
菜单栏伸缩
菜单栏伸缩（附jquery-1.12.1.js）的更多相关文章
- 模糊查询（附上源码和jquery-1.12.1.js，jquery-ui.js，jquery-ui.css）
直接上源码: <!doctype html> <html lang="en"> <head> <meta charset="ut ...
- Jquery各版本下载，附Jquery官网下载方法
jQuery version 2.1.1 http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js http://ajax.aspnetcdn.com ...
- jQuery的基础跟JS的正则
大家好,我是唯芸星,这是我的一点点学过的知识,呈现给大家 1:正则表达式 包括: 1:正则表达式包括两部分 ①:定义正则表达式的规则 ②:正则表达式的规模(i/g/ ...
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- Django静态文件以及模板文件的配置 jQuery v1.12.4
1.配置模板的路径 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os. ...
- javascript: jquery.gomap-1.3.3.js
from:http://www.pittss.lv/jquery/gomap/solutions.php jquery.gomap-1.3.3.js: /** * jQuery goMap * * @ ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery的$和其它JS发生冲突的快速解决方法
众所周知,jQuery是目前最流行的JS封装包,简化了很多复杂的JS程序,JQuery讲浏览器DOM树定义为$,通过$来获取各个子节点. 然后,JS插件并非只有JQuery,还有prototype.j ...
- jquery属性的相关js实现方法
有些公司手机网站开发不用第三方的jquery或者zeptio,直接用原生的javascript.原生javascript功能是蛮强大的,只不过部分属性不支持IE8以下浏览器.下面对jquery相关方法 ...
随机推荐
- （四）Decorator设计模式解决GET/POST请求的乱码问题（转）
一.Decorator设计模式 1.1.Decorator设计模式介绍 当某个对象的方法不适应业务需求时,通常有2种方式可以对方法进行增强: 编写子类,覆盖需增强的方法. 使用Decorator设计模 ...
- python常见函数运用【一】
1.Python hasattr() 函数 描述hasattr() 函数用于判断对象是否包含对应的属性. 语法 hasattr 语法: hasattr(object, name)参数object -- ...
- js入门第二篇之流程控制语句
表达式语句: 一个表达式可以产生一个值,有可能是运算.函数调用 字面量 表达式可以放在任何需要值的地方. 语句: 语句可以理解成一个行为,循环语句和判断语句就是典型的语句,一个程序有多个语句组成. 流 ...
- 阮一峰：jQuery官方基础教程笔记
jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. 对于网页开发者来 ...
- LINUX安装Tree软件包
1.将镜像光盘放入光驱中 查看当前LINUX版本号:cat /etc/redhat-release 2.挂载镜像文件 mount /dev/cdrom /mnt mount :挂载设备命令 /d ...
- 【Hibernate】抓取策略
一.区分延迟和立即检索 二.类级别检索和关联级别检索 一.区分延迟和立即检索 立即检索: 当执行某行代码的时候,马上发出SQL语句进行查询. get() 延迟检索: 当执行某行代码的时候,不会马上发出 ...
- pymysql 1064, 'You have an error in your SQL syntax; check the manual that corresponds to
在python 连接mysql时,最近一直出现了 1064, 'You have an error in your SQL syntax; check the manual that correspo ...
- C语言计算两个日期间隔天数
在网上看到了一个C语言计算日期间隔的方法,咋一看很高深,仔细看更高神,很巧妙. 先直接代码吧 #include <stdio.h> #include <stdlib.h> in ...
- jade过滤器
以上语法基本讲完了jade的语法,然后在jade里面并不仅仅局限于使用jade语法,同样可以使用其他的插件语言,这种机制在jade里面称为filter,在jade里面加入过滤器用冒号 markdown ...
- usb相关
https://github.com/daynix/UsbDk/tree/master/UsbDk 更应该关注下libusb