zoukankan html css js c++ java

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>

坚持

查看全文

相关阅读:
137. 只出现一次的数字 II
JS_利用Canvas进行图片旋转
 JS_图片压缩并预览
 计蒜客——等和的分隔子集
 中缀表达式转后缀并计算（只考虑个位整数，不考虑除0等情况）
求最小数 * 区间和最大值
 967 质量检测
 PAT-1102(Invert a Binary Tree)
PAT-1100(Mars Numbers)
PAT-1099(Build A Binary Search Tree)

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

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

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