下拉列表（web）,用jQuery实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉列表</title>
<meta charset="utf-8" />
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
.ul {
width: 550px;
height: 30px;
margin: 100px auto;
background-color: deepskyblue;
padding-left:10px;
}
.ul li {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
margin-right:10px;
_display:inline;
position:relative;
}
.ul ul{
display:none;
position:absolute;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('.ul>li').mouseover(function (e) {
$(this).children().stop().slideDown(500); //向下滑动的速度500ms
});
$('.ul>li').mouseout(function (e) {
$(this).children().stop().slideUp(500); //向上滑动的速度500ms
});
});
</script>
</head>
<body>
<ul class="ul">
<li>
老大
<ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
老大<ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
老大<ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
老大<ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
老大<ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
</ul>
</body>
</html>
注：jQuery中的动画和事件是遵循一个叫做排队机制的原理，也就是说如果一次触发执行了很多动画那么后面的动画不会自动替换前面的动画，而会一直排队等待执行；
解决方法：在执行动画之前用stop（）方法来清空排队。
下拉列表（web）,用jQuery实现的更多相关文章
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- Web前端JQuery面试题（三）
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- Web前端JQuery面试题（二）
Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...
- Web前端JQuery面试题（一）
Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...
- Python之Web前端jQuery扩展
Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
- 基于MVC3下拉列表联动（JQuery）
上次项目中遇到一个需要多个下拉列表联动的操作,今天有空将实现方式整理以便以后参考. 要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化.如:选择中国,则另个一下拉框里显示中国各个省份. 传 ...
- 移动Web框架:jQuery Mobile VS Sencha Touch
最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...
- web前端-----jQuery
web前端之jQuery篇 一 jQuery是什么? ［1］ jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］ j ...
- 恶补web之八:jQuery(3)
jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...
随机推荐
- 如何升级cordova插件
cordova-plugin-code-push插件在cordova6.1.1 ios环境中出现异常. 所以尝试升级cordova-plugin-code-push来解决这个问题. 升级没有被依赖的插 ...
- Hbase 建表基本命令总结
访问hbase,以及操作hbase,命令不用使用分号 hbase shell 进入hbase list 查看表 hbase shell -d hbase(main):024:0> scan '. ...
- Selenium的PageFactory在大型项目中的应用
出路出路,走出去了,总是会有路的:困难苦难,困在家里就是难. 因为最近遇到的技术问题一直没找到可行的解决办法,一直在翻看selenium的源代码,之前写测试代码的时候就是拿来即用,写什么功能啊,就按手 ...
- 【idea】移动下载站
硬件: 1.Mac或 Linux台 2.300M 无线TP-LINK TL-WR802N AP无密码,与 Mac 同一个网段,Mac开 rails 应用 扫一扫页面,手机下载.OK Mac 搭建ROR ...
- POJ3264 Balanced Lineup 线段树区间最大值 最小值
Q个数 问区间最大值-区间最小值 // #pragma comment(linker, "/STACK:1024000000,1024000000") #include <i ...
- 2016"百度之星" - 复赛（Astar Round3） 1003 拍照
拍照 思路:先静态,离线树状数组,分别统计每个点向左向右能看到的船的数量.再枚举整个区间求最大值. 应为人和船都是动态的,假设船往左走,处理每个点看到向左最大船的数量,满足动态条件.就是向左的船一开始 ...
- C语言简短程序gcc编译过程
一.建立一个×.c源文件.这里起名:rocks.c 二.编辑源代码,在c源文件内输入如下代码: #include <stdio.h> int main() { puts("C R ...
- Apache Hadoop 源码阅读
总之一句话,这些都是hadoop-2.2.0的源代码里有的.也就是不光只是懂理论,编程最重要,还是基本功要扎实啊.... 在hadoop-2.2.0的源码里,按Ctrl + Shift + T . 跳 ...
- nyoj 69 数的长度
数的长度 时间限制:3000 ms | 内存限制:65535 KB 难度:1 描述 N!阶乘是一个非常大的数,大家都知道计算公式是N!=N*(N-1)······*2*1.现在你的任务是计算出 ...
- Linux web工程部署远程必备软件安装
一.序 最近在将程序往linux上面部署,特此记录下部署步骤,待以后参考. web工程部署必备软件为:JDK.tomcat.数据库软件(oracle或mysql),远程监控.上传下载必备软件:VNC. ...