zoukankan      html  css  js  c++  java
  • jQuery下拉菜单

    下拉菜单如果采用原生javascript制作代码比较多,但是使用jquery就大大提高了开发效率,几行代码就搞定

        <div id="wrap">
            <ul id="menu">
                <li><a href="#">Study</a>
                    <ul class="submenu">
                        <li><a href="#">JavaScript</a></li>
                        <li><a href="#">Python</a></li>
                        <li><a href="#">PHP</a></li>
                    </ul>
                </li>
                <li><a href="#">Travel</a>
                    <ul class="submenu">
                        <li><a href="#">ZhangJiaJie</a></li>
                        <li><a href="#">YunNanDaLi</a></li>
                        <li><a href="#">JiuZhaiGou</a></li>
                    </ul>
                </li>
                <li><a href="#">Music</a>
                    <ul class="submenu">
                        <li><a href="#">JayChou</a></li>
                        <li><a href="#">Eason</a></li>
                        <li><a href="#">Andy</a></li>
                    </ul>
                </li>
                <li><a href="#">FineFood</a>
                    <ul class="submenu">
                        <li><a href="#">Hunan</a></li>
                        <li><a href="#">Sichuan</a></li>
                    </ul>
                </li>
            </ul>
        </div>

    CSS代码

        *{
            margin:0;
            padding:0;
        }
        body{
            background:url(QinShiMingYue.jpg);
        }
        a{
            text-decoration:none;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
        }
        #wrap{
            width:388px;
            margin:50px auto;
        }
        #menu li{
            list-style-type:none;
            float:left;
            margin-right:2px;
            width:95px;
        }
        #menu>li{
            border-bottom:1px solid #000;
        }
        #menu li a{
            display:block;
            height:30px;
            line-height:30px;
            background-color:#CCCCCC;
            text-align:center;
        }
        #menu li a:hover{
            color:#CCCCCC;
            background-color:#000000;
        }
        .submenu{
            display:none;
            margin-top:2px;
        }
        .submenu li{
            margin-bottom:1px;
        }

    jquery代码

    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><!--引入百度cdn的jquery库-->
    <script type="text/javascript">
        $(document).ready(function(){
            var lis=$("#menu>li");
            lis.hover(
                function(){
                        $(this).find(".submenu").show("fast");
                },
                function(){
                    $(this).find(".submenu").hide("fast");
                }
            )
        });
    </script>
  • 相关阅读:
    DeepL 人工智能翻译降临 deepl.com
    Node.js ESM(ECMAScript Modules)
    解决Ubuntu 20.04 LTS无法输入中文的问题
    实现pdnsd
    颜色
    Ubuntu 20.04 LTS
    JSX 空的根元素
    如何理解TypeScript接口​​中的语法[key: string]以及[key: number]
    React-Router-DOM
    video转canvas, 并截图
  • 原文地址:https://www.cnblogs.com/ckzhou/p/4027679.html
Copyright © 2011-2022 走看看