菜单栏伸缩（附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相关方法 ...
随机推荐
- Q-Dir
Q-dir,可以分界面,分文件夹,快捷选择等优势,非常好用的工具,可以替代微软的File Explorer. 官网:https://www.softwareok.com/?seite=Freeware ...
- Go part 5 结构体，方法与接收器
结构体 结构体定义 结构体的定义只是一种内存布局的描述(相当于是一个模板),只有当结构体实例化时,才会真正分配内存空间 结构体是一种复合的基本类型,通过关键字 type 定义为 自定义 类型后,使结构 ...
- nexus 匿名用户的问题。
为了做到安全和不浪费我们自己的服务器资源,要绝对拒绝匿名用户进行访问: 1,不允许匿名用户访问 2,禁用匿名的账号 以下是这2点的设置图. ============================== ...
- ajax格式，转入后台
setInterval(function(),时间)定时重复发送请求
- springboot 部署到tomcat，获取根路径问题。空格变为%20
String path = ResourceUtils.getURL("classpath:").getPath()+"static/upload"; Syst ...
- c# 类成员的可访问性
- 火狐新版移除developer Toolbar和无法关闭自动更新的解决
随着火狐的不断更新已经更新到66版本了,近期注意到有个问题是火狐经常提示更新,更新了没多久,又时不时跳出更新的提示,不胜其烦. 在火狐的前期的版本中(大概4年之前吧)在Options菜单里是可以设置从 ...
- windows上使用Jenkins&Github实现CICD
一.摘要 本篇文章笔者将详细介绍Jenkins和Github如何实现CICD的,文章将以Jenkins的使用为主线,伴随着介绍Git的使用,加上一些python代码的执行,最终生成测试报告 二.Jen ...
- python | 不可变数据类型
目录 第1节 分类 第2节 不可变数据类型 2.1 布尔型(bool) 2.2 数字型(number) 2.3 字符串(string) 2.4 元组(tuple) 第1节 分类 python中有7种标 ...
- python_网络编程hmac模块验证客户端的合法性
hmac模块: 比较两个函数的密钥是否一致: import hmac import os msg = os.urandom(32) #生成32位随机字节码 def wdc(): key = b'wdc ...