JQuery(纵向横向菜单)小结
说明：此次小结是为了展示JQuery实现菜单的效果。
文件清单：
menu.jsp ----菜单JSP页面
jquery.js ----JQuery源文件JS
menu.js ----菜单使用的JS
style.css ----菜单样式文件
menu.jsp源文件，如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery[菜单效果]</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<ul>
<li class="mainMenu">
<a href="#">机构管理</a>
<ul>
<li><a href="#">添加机构</a></li>
<li><a href="#">修改机构</a></li>
<li><a href="#">查询机构</a></li>
</ul>
</li>
<li class="mainMenu">
<a href="#">部门管理</a>
<ul>
<li><a href="#">添加部门</a></li>
<li><a href="#">修改部门</a></li>
<li><a href="#">查询部门</a></li>
</ul>
</li>
<li class="mainMenu">
<a href="#">员工管理</a>
<ul>
<li><a href="#">添加员工</a></li>
<li><a href="#">修改员工</a></li>
<li><a href="#">查询员工</a></li>
</ul>
</li>
</ul>
<br/>
<hr/>
<br/>
<ul>
<li class="crossMenu">
<a href="#">机构管理</a>
<ul>
<li><a href="#">添加机构</a></li>
<li><a href="#">修改机构</a></li>
<li><a href="#">查询机构</a></li>
</ul>
</li>
<li class="crossMenu">
<a href="#">部门管理</a>
<ul>
<li><a href="#">添加部门</a></li>
<li><a href="#">修改部门</a></li>
<li><a href="#">查询部门</a></li>
</ul>
</li>
<li class="crossMenu">
<a href="#">员工管理</a>
<ul>
<li><a href="#">添加员工</a></li>
<li><a href="#">修改员工</a></li>
<li><a href="#">查询员工</a></li>
</ul>
</li>
</ul>
</body>
</html>
style.css样式源文件，如下：
/*菜单样式：2010-11-24*/
UL,LI{
/*去掉小圆点*/
list-style: none;
}
UL{
/*清除子菜单缩进*/
padding: 0;
/*但IE浏览器不能缩进*/
margin: 0;
}
/*主菜单样式*/
.mainMenu,.crossMenu{
/*字体大小*/
font-size: 12px;
/*添加背景图片*/
background-image: url(../../resources/images/title.gif);
/*背景图横向重复*/
background-repeat: repeat-x;
/*主菜单宽度*/
width: 70px;
}
/*子菜单样式*/
LI{
/*背景色*/
background-color: #EEEEEE;
}
A{
/*取消链接的下划线*/
text-decoration: none;
/*子菜单缩进*/
padding-left: 15px;
/*让连接充满区域，及菜单边缘也可以点击
* 问题：如果值为block,IE会出现问题，
* 不能填充，且子菜单会变样，因此我们
* 用 inline解决，但是不能解决填充，
* 因此加上宽度(70 - 15)
*/
display: block;
display: inline;
width: 70px;
/*在所有的链接加3个像素的上边距和下边距*/
padding-top: 3px;
padding-bottom: 3px;
}
.mainMenu A,.crossMenu A{
/*主菜单链接为白色*/
color: white;
/*链接背景图片*/
background-image: url(../../resources/images/collapsed.gif);
/*背景图不重复*/
background-repeat: no-repeat;
/*背景箭头的位置*/
background-position: 2px center;
}
.mainMenu LI A,.crossMenu LI A{
/*子菜单链接文字为黑色*/
color: black;
/*去掉子菜单背景箭头*/
background-image: none;
}
/*主菜单下的UL全部隐藏*/
.mainMenu UL,.crossMenu UL{
display: none;
}
/*横向菜单*/
.crossMenu{
/*横向排列*/
float: left;
/*字体大小*/
font-size: 12px;
}
menu.js源文件，如下：
$(
function()
{
/**
* 如果使用.mainMenu a选择器，会
* 出现点击子菜单也会触发click事件
* 解决方法：使用JQuery的特有方式
* .mainMenu > a
* */
$('.mainMenu > a').click(
function()
{
//找到主菜单项的子菜单项
var childMenu = $(this).next('ul');
/*常规方法*/
/*
if('none' == childMenu.css('display'))
{
childMenu.css('display','block');
}
else
{
childMenu.css('display','none');
}
*/
/*使用JQuery的方法
* 数值为毫秒
* 文字：slow/normal,fast*/
//childMenu.show(100);
//childMenu.show('normal');
//childMenu.hide(100);
//省去if else 判断
//childMenu.toggle('normal');
//卷帘效果，也支持参数
//childMenu.slideDown();
//childMenu.slideUp();
//省去if else 判断
childMenu.slideToggle();
changeIcon($(this));
}
);
//处理横向菜单
/*
$('.crossMenu > a').hover(
function()
{
$(this).next('ul').slideDown();
},
function()
{//但是鼠标移到子菜单，会有bug,子菜单消失
//$(this).next('ul').slideUp();
//首先得到子菜单
var childMenu = $(this).next('ul');
//解决方法，延时处理(300ms)
var timeOutID = setTimeout(
function()
{
$(this).next('ul').slideUp();
},300
);
childMenu.hover(
function()
{
//删除父菜单的延时
clearTimeout(timeOutID);
},
function()
{//但此时还是有问题，走了很多弯路
$(this).slideUp();
}
);
}
);
*/
$('.crossMenu').hover(
//自己判断
// function()
// {
// $(this).children('ul').slideDown();
// },
// function()
// {
// $(this).children('ul').slideUp();
// }
//卷帘效果
function()
{
$(this).children('ul').slideToggle();
changeIcon($(this).children('a'));
}
);
}
);
/*修改主菜单的指示图标*/
function changeIcon(mainNode)
{
if(mainNode)
{
if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0)
{
mainNode.css('background-image', 'url(resources/images/expanded.gif)');
}
else
{
mainNode.css('background-image', 'url(resources/images/collapsed.gif)');
}
}
}
小结：
A部分
① 页面中的菜单可以通过嵌套ul和li来表示；
② 菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构件多层的菜单；
③ 浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进.Opera浏览器比较特殊，li的标志符号和其他浏览器不同；
④ list-style属性值为none时，可以清除ul和li前的小圆点
⑤ 清除子菜单的缩进值，需要padding和margin都为0，其中IE只有margin也为0时才可以清除缩进值；
⑥ 可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域；
⑦ 可以使用background-repeat来控制背景图的重复填充方式；
⑧ 如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的；
⑨ text-decoration属性值为none时，可以取消链接A文字下方的下划线；
⑩ background-position可以控制背景图的位置，属性值既可以用数值，也可以使用center,left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向；
B部分
① background-image的值为none表示没有背景图；
② background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示；
③ display的值为none可以用来隐藏元素；
④ .mainMenu a 和 .mainMenu > a 的不同之处，前者选择使用了.mainMenu的这个class的元素内部所有的a节点，后者只选择.mainMenu的子节点中的a节点；
⑤ show(),hide()方法可以用于显示或隐藏元素，没有参数的效果和修改css的display属性效果一样。参数可以是以毫秒为单位的数值，或者是’slow’,’normal’,fast’,都可以控制完成显示或隐藏需要的时间。注意这时动画效果是靠不断改变元素的宽度和高度来实现的。
⑥ toggle方法更为强大，可以省去判断元素是否显示、隐藏，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show()和hide()相同；
⑦ slideDown、slideUp可以实现向下或向上卷动的效果，实际上是通过制定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数如果为空的情况下和show()，hide()不同；
⑧ slideToggle和toggle达到类似的效果；
⑨ DOCTYPE对于JQuery的动画效果是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果；
⑩ Float的值为left，可以使原本各自位于一行的元素全部在一行中向左浮动；
C部分
① 可以给多个选择器定义同样的样式，选择器之间用，分割。同样对于JQuery的$（）方法，也可以传入多个选择器。
相关推荐
### 四、小结 正确设置Word文档的页边距是一项既实用又艺术的工作，它不仅能提升文档的整体美观度，还能体现作者的专业性和对细节的关注。掌握了本文介绍的技巧后，无论是日常办公还是学术研究，都能轻松应对各种...
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
ACM动态规划模板-区间修改线段树问题模板
# 踏入C语言的奇妙编程世界 在编程的广阔宇宙中，C语言宛如一颗璀璨恒星，以其独特魅力与强大功能，始终占据着不可替代的地位。无论你是编程小白，还是有一定基础想进一步提升的开发者，C语言都值得深入探索。 C语言的高效性与可移植性令人瞩目。它能直接操控硬件，执行速度快，是系统软件、嵌入式开发的首选。同时，代码可在不同操作系统和硬件平台间轻松移植，极大节省开发成本。 学习C语言，能让你深入理解计算机底层原理，培养逻辑思维和问题解决能力。掌握C语言后，再学习其他编程语言也会事半功倍。 现在，让我们一起开启C语言学习之旅。这里有丰富教程、实用案例、详细代码解析，助你逐步掌握C语言核心知识和编程技巧。别再犹豫，加入我们，在C语言的海洋中尽情遨游，挖掘无限可能，为未来的编程之路打下坚实基础！
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
本项目为Python语言开发的PersonRelationKnowledgeGraph设计源码，总计包含49个文件，涵盖19个.pyc字节码文件、12个.py源代码文件、8个.txt文本文件、3个.xml配置文件、3个.png图片文件、2个.md标记文件、1个.iml项目配置文件、1个.cfg配置文件。该源码库旨在构建一个用于表示和查询人物关系的知识图谱系统。
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
rtsp实时预览接口URL:/evo-apigw/admin/API/MTS/Video/StartVideo HLS、FLV、RTMP实时预览接口方式 :接口URL/evo-apigw/admin/API/video/stream/realtime 参数名 必选 类型 说明 data true string Json串 +channelId true string 视频通道编码 +streamType true string 码流类型：1=主码流, 2=辅码流，3=辅码流2 +type true string 协议类型：hls,hlss,flv,flvs,ws_flv,wss_flv,rtmp hls:http协议，m3u8格式，端口7086; hlss:https协议，m3u8格式，端口是7096; flv:http协议，flv格式,端口7886; flvs:https协议，flv格式,端口是7896; ws_flv:ws协议，flv格式,端口是7886; wss_flv:wss协议，flv格式,端口是7896; rtmp:rtmp协议,端口是1975;
Simulink永磁风机飞轮储能系统二次调频技术研究：频率特性分析与参数优化,Simulink永磁风机飞轮储能二次调频技术：系统频率特性详解及参数优化研究参考详实文献及两区域系统应用,simulink永磁风机飞轮储能二次调频，系统频率特性如下，可改变调频参数改善频率。 参考文献详细，两区域系统二次调频。 ,核心关键词： 1. Simulink 2. 永磁风机 3. 飞轮储能 4. 二次调频 5. 系统频率特性 6. 调频参数 7. 改善频率 8. 参考文献 9. 两区域系统 以上关键词用分号（;）分隔，结果为：Simulink;永磁风机;飞轮储能;二次调频;系统频率特性;调频参数;改善频率;参考文献;两区域系统。,基于Simulink的永磁风机与飞轮储能系统二次调频研究：频率特性及调频参数优化
MATLAB驱动的ASR防滑转模型：PID与对照控制算法对比，冰雪路面条件下滑移率与车速轮速对照展示,MATLAB驱动的ASR防滑转模型：PID与对照控制算法对比，冰雪路面条件下滑移率与车速轮速对照图展示,MATLAB驱动防滑转模型ASR模型 ASR模型驱动防滑转模型 ?牵引力控制系统模型 选择PID控制算法以及对照控制算法，共两种控制算法，可进行选择。 选择冰路面以及雪路面，共两种路面条件，可进行选择。 控制目标为滑移率0.2，出图显示车速以及轮速对照，出图显示车辆轮胎滑移率。 模型简单，仅供参考。 ,MATLAB; ASR模型; 防滑转模型; 牵引力控制系统模型; PID控制算法; 对照控制算法; 冰路面; 雪路面; 控制目标; 滑移率; 车速; 轮速。,MATLAB驱动的ASR模型：PID与对照算法在冰雪路面的滑移率控制研究
芯片失效分析方法介绍 -深入解析芯片故障原因及预防措施.pptx
4131_127989170.html
内容概要：本文提供了一个全面的PostgreSQL自动化部署解决方案，涵盖智能环境适应、多平台支持、内存与性能优化以及安全性加强等重要方面。首先介绍了脚本的功能及其调用方法，随后详细阐述了操作系统和依赖软件包的准备过程、配置项的自动生成机制，还包括对实例的安全性和监控功能的强化措施。部署指南给出了具体的命令操作指导，便于新手理解和执行。最后强调了该工具对于不同硬件条件和服务需求的有效应对能力，特别是针对云计算环境下应用的支持特点。 适合人群：对PostgreSQL集群运维有一定基础并渴望提高效率和安全性的数据库管理员及工程师。 使用场景及目标：本脚本能够帮助企业在大规模部署时减少人工介入时间，确保系统的稳定性与高性能，适用于各类需要稳定可靠的数据库解决方案的企业或机构，特别是在大数据量和高并发事务处理场合。 其他说明：文中还提及了一些高级功能如自动备份、流复制等设置步骤，使得该方案不仅可以快速上线而且能满足后续维护和发展阶段的要求。同时提到的技术性能数据也为用户评估其能否满足业务需求提供了直观参考。
房地产开发合同[示范文本].doc
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！
工程技术承包合同[示范文本].doc
蓝桥杯开发赛【作品源码】
在日常的工作和学习中，你是否常常为处理复杂的数据、生成高质量的文本或者进行精准的图像识别而烦恼？DeepSeek 或许就是你一直在寻找的解决方案！它以其高效、智能的特点，在各个行业都展现出了巨大的应用价值。然而，想要充分发挥 DeepSeek 的优势，掌握从入门到精通的知识和技能至关重要。本文将从实际应用的角度出发，为你详细介绍 DeepSeek 的基本原理、操作方法以及高级技巧。通过系统的学习，你将能够轻松地运用 DeepSeek 解决实际问题，提升工作效率和质量，让自己在职场和学术领域脱颖而出。现在，就让我们一起开启这场实用又高效的学习之旅吧！