菜单栏伸缩（附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相关方法 ...
随机推荐
- sql注入测试(2)---实例测试
以下篇幅,用一个简单的实例说明如何进行测试. 功能:根据用户NAME删除用户,采用的是SQL拼接的方式,核心代码部分如下: public static void deleteByName(String ...
- Unable to resolve service for type 'Microsoft.AspNetCore.Http.IHttpContextAccessor'
An unhandled exception occurred while processing the request. InvalidOperationException: Unable to r ...
- JDBC 复习3 存取Oracle大数据 clob blob
1 目录结构记得导包咯 mysql oracle 2 代码,DBUtil工具类见前面的随笔博文 package dbex.mysql; import java.io.BufferedReader; i ...
- pytorch神经网络实现的基本步骤
转载自:https://blog.csdn.net/dss_dssssd/article/details/83892824 版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载 ...
- springboot启动流程（一）构造SpringApplication实例对象
所有文章 https://www.cnblogs.com/lay2017/p/11478237.html 启动入口 本文是springboot启动流程的第一篇,涉及的内容是SpringApplicat ...
- 移动端自适应之flexible
移动端自适应之flexible 作用:flexible的作用是使页面可以适配不同移动终端 原理:在页面html标签上添加style = "font-size: 36px;"样式,设 ...
- 关于NSOperationQueue，一个容易让初学者误解的问题
凡是学习NSOperationQueue的人,都会遇到setMaxConcurrentOperationCount这个函数.在网上的许多博文中,都将setMaxConcurrentOperationC ...
- git的使用（win7 64位）
下载安装 1.官方下载网址:https://git-scm.com/downloads: 2.安装十分简单,按照默认配置,一直点击next,最后点击install,即安装成功: 3.安装成功之后,则自 ...
- MySQL操作规范总结
来源:静以致远√团团 用户权限管理创建用户命令:CREATE USER 'username'@'host' IDENTIFIED BY 'password';说明:Username所创建的用户名hos ...
- MySQL无法启动问题解决Warning: World-writable config file ‘/etc/my.cnf’ is ignored
今天重启一台内网服务器,发现mysql无法正常重启,执行systemctl start mysql,报错如下 Starting LSB: start and stop MySQL... Dec 11 ...