zoukankan      html  css  js  c++  java
  • 下拉列表(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 {
                550px;
                height: 30px;
                margin: 100px auto;
                background-color: deepskyblue;
                padding-left:10px;
            }

                .ul li {
                    float: left;
                    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()方法来清空排队。

  • 相关阅读:
    python os.path
    ant的基本说明
    gcc的基本使用方法
    java逻辑运算符小节
    awk 简单教程
    推荐:恢复Ext3下被删除的文件
    python读取excel
    ant的简明教程,后面运行写的不错
    WinForm中快捷键与组合按键的设置
    InstallShield 2010集成.net Framework 4的安装包制作
  • 原文地址:https://www.cnblogs.com/ZT-SummerRain/p/4746366.html
Copyright © 2011-2022 走看看