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

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

结构:<ul>

　　　　<li>

　　　　　　<ul>

　　　　　　</ul>

　　 </li>

　　　　<li>

　　　　　　<ul>

　　　　　　</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>

坚持

相关阅读:
慕课网多物体运动源代码
慕课网javascript动画特效多透明度源代码
百度地图实时侦听鼠标滚轮获取地图zoom缩放级别
百度地图自定义地图切片问题
百度地图之多点步行路径连线问题
百度地图利用数组实现多个标注点的显示
理解clear: left/clear: right
CSS3 Transform属性详解
setInterval() 方法
for Share

原文地址：https://www.cnblogs.com/gaoSJ/p/12743937.html

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

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