<!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. MessagePack介绍

    在项目中,服务端的人需要我研究messagepcak 进行数据的传输,对messagePack的了解就是传输的数据格式都是二进制,可以节省用户的流量,就因为这点 数据格式小,服务端决定采用msgpac ...

  2. HDU 2602 Find a way BFS搜索

    题意:找到总时间最少的KFC 分析:两遍BFS 找KFC比较一下 注:有些地方的KFC可能到达不了,wa了一次 #include <iostream> #include <cstdi ...

  3. 《转》GDB中应该知道的几个调试方法

    原文:http://coolshell.cn/articles/3643.html 七.八年前写过一篇<用GDB调试程序>,于是,从那以后,很多朋友在MSN上以及给我发邮件询问我关于GDB ...

  4. js基础第二天

    函数:是由事件驱动的或者当它被调用时执行的可以重复使用的代码块. 函数声明: 1. 自定义函数(常用) var num=10; function fun() { alert("我是自定义函数 ...

  5. 使用asp.net MVC4中的Bundle遇到的问题及解决办法

    背景 之前有过使用MVC3的经验,也建过MVC4的基本样例看过,知道有bundle这么一个方法. 近日想建个网站使用MVC4,但是我觉得在基本样例上改不好,有太多无用的东西,所以就建了一个空白的MVC ...

  6. 如何添加网站for Linux（绑定域名）

    [以下配置的路径以阿里云提供的标准环境路径为准,如果您另行安装,请根据实际安装路径配置].   1.cd /alidata/server/httpd/conf/vhosts/ 进入绑定域名所在目录, ...

  7. Vijos1404 遭遇战 最短路,dijkstra,堆

    P1404遭遇战 标签:[显示标签]     背景 你知道吗,SQ Class的人都很喜欢打CS.(不知道CS是什么的人不用参加这次比赛). 描述 今天,他们在打一张叫DUSTII的地图,万恶的恐怖分 ...

  8. 卸载redhat6.5的yum，安装centos6的yum，配置第三方yum源

    **redhat的yum在线更新是收费的,如果没有注册的话不能使用,如果要使用,需将redhat的yum卸载后,重启安装其他yum源,再配置其他源.** 本文包括配置本地源及第三方源.第三方源包括:网 ...

  9. BNUOJ-29364 Bread Sorting 水题

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=29364 题意:给一个序列,输出序列中,二进制1的个数最少的数.. 随便搞搞就行了,关于更多 ...

  10. SQL Server 2008数据库创建，备份，还原图解及注意点

    一.新建数据库 步骤1:点击“新建数据库”. 步骤2:输入数据库名称,设置数据库文件保存位置(注意点:最好自己设置数据库文件保存位置,不要采用安装时默认的文件保存位置!),点击“确认”即可完成新库的创 ...