<!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实现的更多相关文章

  1. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  2. Web前端JQuery面试题（三）

    Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...

  3. Web前端JQuery面试题（二）

    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...

  4. Web前端JQuery面试题（一）

    Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...

  5. Python之Web前端jQuery扩展

    Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...

  6. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础

    这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...

  7. 基于MVC3下拉列表联动（JQuery）

    上次项目中遇到一个需要多个下拉列表联动的操作,今天有空将实现方式整理以便以后参考. 要达到的效果是,点击一个下拉框,则另一个下拉框的值发生对应变化.如:选择中国,则另个一下拉框里显示中国各个省份. 传 ...

  8. 移动Web框架:jQuery Mobile VS Sencha Touch

    最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...

  9. web前端-----jQuery

    web前端之jQuery篇 一 jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   j ...

  10. 恶补web之八:jQuery(3)

    jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...

随机推荐

  1. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

  2. devexpress 中Grid 的使用：为零不显示

    如果要让为0的列不显示: this.gridColumn_FAmount.DisplayFormat.FormatType = DevExpress.Utils.FormatType.Numeric; ...

  3. HDU 4283 You Are the One (12年天津 区间DP)

    题意:有一个队列,每个人有一个愤怒值a[i],如果他是第k个上场,不开心指数就为(k-1)*a[i].但是边上有一个小黑屋(其实就是个堆栈),可以一定程度上调整上场程序 思路:枚举区间和每个人第几个上 ...

  4. HDU-4716 A Computer Graphics Problem 水题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4716 直接搞.. //STATUS:C++_AC_0MS_288KB #include <fun ...

  5. HDU-4669 Mutiples on a circle 环形DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4669 题意:给一串数字连乘一个环,求连续的子串中组成的新的数字能被K整除的个数. 首先容易想到用DP来 ...

  6. Java 反射机制分析指南

    一.JAVA是动态语言吗? 一般而言,说到动态言,都是指在程序运行时允许改变程序结构或者变量类型,从这个观点看,JAVA和C++一样,都不是动态语言. 但JAVA它却有着一个非常突出的动态相关机制:反 ...

  7. HTTP协议理解与应用总结

    总结了自己在实际工作场景中遇到的与http协议相关的一些内容的理解. Request & Response Request格式 <request-line> 比如:GET /api ...

  8. Java注解处理器使用详解

    在这篇文章中,我将阐述怎样写一个注解处理器(Annotation Processor).在这篇教程中,首先,我将向您解释什么是注解器,你可以利用这个强大的工具做什么以及不能做什么:然后,我将一步一步实 ...

  9. PopupWindow 问题集锦

    1.响应返回键/响应键盘事件(onKeyListener) 最近在做PopupWindow, 发现使用PopupWindow一出现,不会响应popup外面的事件,经过资料查找,发现有两种方法可以响应外 ...

  10. Unity3D的ugui之按钮事件

    为Unity3D的按钮添加事件有三种方式,假设我们场景中有一个Canvas对象,Canvas对象中有一个Button对象. 方式一: 创建脚本ClickObject.cs,然后将脚本添加到Canvas ...