jQuery学习 （实现内联下拉菜单效果（一个小test）

1：主要学习实现这种菜单的方法之一

结构:<ul> 

　　　　<li>

　　　　　　<span>菜单1</span>

　　　　　　<ul>

　　　　　　　　<li></li>

                             <li></li>

　　　　　　</ul>

　　       </li>

 

　　　　<li>

　　　　　　<span>菜单2</span>

　　　　　　<ul>

　　　　　　　　<li></li>

                             <li></li>

　　　　　　</ul>

　　       </li>

      </ul>

 

    <style type="text/css">
        ul li{
            background-color: aquamarine;
            float: left;
            margin-left: 5px;
        }

        li ul, li ul li{
            background-color: pink;
            text-indent: 30px;
        }
        li ul li{
           float: none;
        }

    </style>

    <script>

       $(function () {
           $("#one").mousemove(function () {
               $("#one_ul").css("display","block");
           }).mouseout(function () {
               $("#one_ul").css("display","none");
           });

           $("#tow").mousemove(function () {
               $("#tow_ul").css("display","block");
           }).mouseout(function () {
               $("#tow_ul").css("display","none");
           });

           $("#thr").mousemove(function () {
               $("#thr_ul").show(600);//如果调用 show 或者hide 就会出现动画效果 慢慢显示或者慢慢消失的效果 与什么直接设置css的方式对比
           }).mouseout(function () {
               $("#thr_ul").hide(400);
           });

       })

    </script>
</head>
<body>

    <div class="warp">
        <ul>
            <li>
                <h2 id="one">第一个标签选择</h2>
                <ul id="one_ul" style="display:none">
                    <li>ul li1 ul li1</li>
                    <li>ul li1 ul li1</li>
                    <li>ul li1 ul li1</li>
                    <li>ul li1 ul li1</li>
                    <li>ul li1 ul li1</li>
                </ul>
            </li>
            <li>
                <h2 id="tow">第二个标签选择</h2>
                <ul id="tow_ul" style="display:none">
                    <li>ul li2 ul li2</li>
                    <li>ul li2 ul li2</li>
                    <li>ul li2 ul li2</li>
                    <li>ul li2 ul li2</li>
                    <li>ul li2 ul li2</li>
                </ul>
            </li>
            <li>
                <h2  id="thr">第三个标签选择</h2>
                <ul  id = thr_ul style="display:none">
                    <li>ul li3 ul li3</li>
                    <li>ul li3 ul li3</li>
                    <li>ul li3 ul li3</li>
                    <li>ul li3 ul li3</li>
                    <li>ul li3 ul li3</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

 

 

posted @ 2020-04-21 13:22  gaoshengjun  阅读(166)  评论(0)  编辑  收藏  举报