菜单栏伸缩（附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相关方法 ...
随机推荐
- （九）easyUI之选项卡
前台 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...
- c#入门学习笔记
Hello World //打印语句 Console.WriteLine("Hello World"); //暂停 Console.ReadKey(); 数据类型 1.值类型 by ...
- [转载]Java中继承、装饰者模式和代理模式的区别
[转载]Java中继承.装饰者模式和代理模式的区别 这是我在学Java Web时穿插学习Java设计模式的笔记 我就不转载原文了,直接指路好了: 装饰者模式和继承的区别: https://blog.c ...
- 三、eureka服务端获取服务列表
所有文章 https://www.cnblogs.com/lay2017/p/11908715.html 正文 eureka服务端维护了一个服务信息的列表,服务端节点之间相互复制服务信息.而作为eur ...
- css手册中各种符号的意思
我们经常在查css手册的时候,看到很多符号都不认识,百度了一下,收藏下来.与大家分享 比如 font属性 font:[ [ <font-style> || <font-variant ...
- Templates/Code Combinations
Queries: Templates/Code Combinations sql>select * from gl_dynamic_summ_combinations where CODE_ ...
- Oracle学习笔记——imp还原数据库
1. 创建用户及指定用户名密码 create user [用户名] identified by [密码]; create user fskxjsxy identified by fskxjs ...
- post请求body格式
在PostMan中用Post方式,Body有form-data,x-www-form-urlencoded,raw,binary四种. 其中raw又分以下7种. 现在来区分一下: form-data是 ...
- Java程序猿跳槽应该学哪些方面的技术
互联网产品.大型企业级项目常会用到的: 并发处理技术 具体到Java上通常是涉及java.util.concurrent.并发锁机制.NIO等方面,当然最近比较火爆的Netty框架也可以作为高并发处理 ...
- linux 服务器常规巡检并生成报表（一）
背景 最近接到一个需求要求每天巡检各台业务设备,并导出报表,但一想到设备有N台,一台台每天巡检这样的重复劳作实在是太伤神了,因此决定写一个脚本来搞定这件事. 首先,第一个要解决的问题是批量服务器执行命 ...