web前端学习（五）（9）-- jQuery菜单

1、垂直菜单布局

2、垂直菜单实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function(){
           $(".main>a").click(function(){
               var ulNode = $(this).next("ul");
               // if(ulNode.css("display")=="none"){
               //     ulNode.css("display", "block");
               // }else{
               //     ulNode.css("display","none");
               // }/*这种方法有些繁琐。*/
               // ulNode.hide();/*隐藏*/
               // ulNode.show();/*显示*/
               //ulNode.toggle(500);/*显示/隐藏 这种是相对上面方便的方法*/
                                /*
                                * 数字、slow、normal、fast
                                * */
               // ulNode.slideDown();
               // ulNode.slideUp();//这两种方法也需要自己进行判断。
               ulNode.slideToggle();//这种方法就不需要自己进行判断了。
           });/*用尖角号防止点击子菜单也会执行上面函数*/
        });
    </script>
    <style>
        ul,li{
            list-style: none;
        }
        ul{
            padding:0px;/*覆盖子菜单的缩进*/
            margin:0px;/*防止ie浏览器的问题。*/
        }
        .main{
            background-image: url("images/title.gif");
            background-repeat: repeat-x;
            width:100px;
        }
        li{
            background-color:#eeeeee;
        }
        a{
            text-decoration: none;
            padding-left:20px;
            display:block;
            width:80px;
            padding-top:3px;
            padding-bottom:3px;
        }
        .main>a{
            color:white;
            background-image: url("images/collapsed.gif");
            background-repeat:no-repeat;
            background-position:3px center;/*距离左面3px，垂直方向居中*/
        }
        .main li a{
            color:black;
            background-image:none;
        }
        .main ul{
            display:none;
        }
    </style>
</head>
<body>
<ul>
    <li class="main">
        <a href="#">菜单1</a>
        <ul>
            <li><a href="">子菜单1</a></li>
            <li><a href="">子菜单2</a></li>
        </ul>
    </li>
    <li class="main">
        <a href="#">菜单2</a>
        <ul>
            <li><a href="">子菜单1</a></li>
            <li><a href="">子菜单2</a></li>
        </ul>
    </li>
    <li class="main">
        <a href="#">菜单3</a>
        <ul>
            <li><a href="">子菜单1</a></li>
            <li><a href="">子菜单2</a></li>
        </ul>
    </li>

</ul>
</body>
</html>

3、水平菜单的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function () {
            isClick = 1;
            /*为了防止多次点击而设置的变量*/
            $(".main>a").click(function () {
                // 这里有个非常nice的写法：$(".main>a,.hmain>a").click(function(){
                // if (isClick) {
                //     isClick = 0;
                    var ulNode = $(this).next("ul");
                    ulNode.stop(true,false).slideToggle();/*详情查询stop函数的用法啊，取消回调函数，两个参数第一个参数决定是否取消当前正在执行的动画，
                                                            第二个参数决定是否立即完成当前正在执行的动画。
                                                            我们在这里使用的动画效果不足以用到第一个参数，所以这里true和false都是可以的。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　这里实现了如何避免动画重复的功能
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　*/
                    /*插两个标签：hover、stop标签*/
                    changeIcon($(this));
                    // setTimeout(function () {
                    //     isClick = 1;
                    // }, 1000);
                    // /*如何处理多次点击造成的之后一直执行动作的方法。
                    //     这里用的是toggle()函数所以没法分开两个动作的处理
                    //     比如在还没展开完毕的时候再次点击没有实现直接收回动作。*/
                // }
            });
            // $(".hmain").hover(function(){
            //     $(this).children("ul").slideToggle();
            // });//这是一种比较简单的方法，下面还有一种很奇妙的方法，给hover两个函数对象作为参数。
            isHover = 1;
            /*为了防止多次点击而设置的变量*/

            $(".hmain").hover(function () {
                    $(this).children("ul").stop(false,false).slideDown(500);
                    changeIcon($(this).children("a"));
                    /*点击的是main的子元素a标签之后执行的动作。*/
                }
                , function () {
                    $(this).children("ul").stop(false,false).slideUp(500);
                    changeIcon($(this).children("a"));
                }
            );
            /*jQuery官方文档中有介绍，这是有两个参数时的方法。
        一个参数是鼠标放上去的时候有的动作，第二个参数时鼠标离开时将要执行的动作。*/

        });

        function changeIcon(mainNode) {
            if (mainNode) {
                if (mainNode.css("background-image").indexOf("collapse.gif") >= 0) {/*indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。*/
                    mainNode.css("background-image", "url('images/expanded.gif')");
                } else {
                    mainNode.css("background-image", "url('images/collapse.gif')");
                }
            }
        }
    </script>
    <style>
        ul, li {
            list-style: none;
        }

        ul {
            padding: 0px; /*覆盖子菜单的缩进*/
            margin: 0px; /*防止ie浏览器的问题。*/
        }

        .main, .hmain {
            background-image: url("images/title.gif");
            background-repeat: repeat-x;
            width: 100px;
        }

        li {
            background-color: #eeeeee;
        }

        a {
            text-decoration: none;
            padding-left: 20px;
            display: block;
            width: 80px;
            padding-top: 3px;
            padding-bottom: 3px;
        }

        .main > a, .hmain > a {
            color: white;
            background-image: url("images/collapsed.gif");
            background-repeat: no-repeat;
            background-position: 3px center; /*距离左面3px，垂直方向居中*/
        }

        .main li a, .hmain li a {
            color: black;
            background-image: none;
        }

        .main ul, .hmain ul {
            display: none;
        }

        .hmain {
            float: left;
            margin-right: 3px;
        }
    </style>
</head>
<body>
<ul>
    <li class="main">
        <a href="#">菜单1</a>
        <ul>
            <li><a href="">子菜单1</a></li>
            <li><a href="">子菜单2</a></li>
        </ul>
    </li>
    <li class="main">
        <a href="#">菜单2</a>
        <ul>
            <li><a href="">子菜单1</a></li>
            <li><a href="">子菜单2</a></li>
        </ul>
    </li>
    <li class="main">
        <a href="#">菜单3</a>
        <ul>
            <li><a href="">子菜单1</a></li>
            <li><a href="">子菜单2</a></li>
        </ul>
    </li>


    <br/>
    <li class="hmain">
        <a href="#">菜单1</a>
        <ul>
            <li><a href="">子菜单1</a></li>
            <li><a href="">子菜单2</a></li>
        </ul>
    </li>
    <li class="hmain">
        <a href="#">菜单2</a>
        <ul>
            <li><a href="">子菜单1</a></li>
            <li><a href="">子菜单2</a></li>
        </ul>
    </li>
    <li class="hmain">
        <a href="#">菜单3</a>
        <ul>
            <li><a href="">子菜单1</a></li>
            <li><a href="">子菜单2</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

web前端学习（五）（9）-- jQuery菜单

1、垂直菜单布局

2、垂直菜单实现

3、水平菜单的实现

猜你喜欢