43-jQuery折叠菜单下（添加事件）

最新推荐文章于 2021-12-08 09:34:04 发布

杨亚仑

最新推荐文章于 2021-12-08 09:34:04 发布

阅读量467

点赞数

分类专栏： jQuery入门练习

本文链接：https://blog.csdn.net/yangyalun/article/details/83387080

版权

jQuery入门练习专栏收录该内容

60 篇文章 0 订阅

订阅专栏

感想：一.学习了1.transform: rotate(90deg);是用来旋转角度的。
补充：2.transform: scale(0.5) 或者 transform: scale(0.5, 2);
（1）一个参数时表示水平和垂直同时缩放该倍率。
（2）两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率
3.transform: skew(30deg) 或者 transform: skew(30deg, 30deg);
（1）一个参数时：表示水平方向的倾斜角度
（2）两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
二.这个折叠菜单用原生JS写，略麻烦。而jQuery写起来则方便的多，并且原生JS很难实现jQuery中的slideDown和 slideUp这个效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>43-jQuery折叠菜单下（添加事件）</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            background: rgb(252,252,252);
            list-style: none;
            width: 300px;
            margin: 100px auto;
            /*border: 1px solid #000;*/
        }
        .nav>li{
            border: 1px solid #000;
            line-height: 35px;
            border-bottom: none;
            text-indent: 2em;
            position: relative;
        }
        .nav>li:last-child{
            border-bottom: 1px solid #000;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;

        }
        .nav>li:first-child{
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;

        }
        .nav>li>span{
            background: url("images/arrow_right.jpg") no-repeat center center;
            display: inline-block;
            width: 32px;
            height: 32px;
            position: absolute;
            right: 10px;
            top: 5px;
        }
        .sub{
            display: none;
        }
        .sub>li{
            list-style: none;
            background: mediumpurple;
            border: 1px solid white;

        }
        .sub>li:hover{
            background: red;
        }
        .nav>.current>span{
            transform: rotate(90deg);
        }
        .show{
            display: block;
        }
    </style>
<script src="JS_file/jquery-1.12.4.js"></script>
<script>
  /*   $(function () {
             // 1.监听一级菜单的点击事件
         $(".nav>li").click(function () {
             //    1.1拿到二级菜单
             var $sub=$(this).children(".sub");
             //判断二级菜单是否隐藏，若隐藏，执行下面事件
             if($sub.is(":hidden"))
             {
                 //    1.2让二级菜单展开
                 $sub.slideDown();
                 //    1.3拿到所有非当前的二级菜单
                 var otherSub=$(this).siblings().children(".sub");
                 //    1.4让所有的非当前菜单隐藏
                 otherSub.slideUp();
                 //    1.5让被点击的一级菜单箭头旋转
                 $(this).addClass("current");
                 //    1.6让所有非被点击的一级菜单箭头还原
                 $(this).siblings().removeClass("current");
             }
             //若显示，则点击该一级菜单时，让它变为隐藏，并将该一级菜单的箭头恢复。
            /!*（视频上教的并没有这个if else，但有个问题就是，只要点击一级菜单，将一直会有二级菜单展开，如何收起呢？
            点击后，先判别该点击的一级菜单下的二级菜单是否显示。用到了is(":hidden")方法
            ）*!/
             else
             {
                 $sub.slideUp();
                 $(this).removeClass("current");
             }

         })
     })*/
    

    //原生JS写法
    window.onload=function () {
        var oNav=document.getElementsByClassName("nav")[0];
        var aUl=document.getElementsByClassName("sub");
        var aLi=oNav.children;
       // alert(aLi.length)
        for(var i=0;i<aLi.length;i++)
        {
            aLi[i].index=i;
            aLi[i].onclick=function () {
               /* 注意了：之前我也遇见过这个我问题，不能写if(aUl[this.index].style.display=="none"){}else{}
                  若这样写：第一次点击一级标题，console.log(aUl[this.index].style.displa=="none")返回的是false
                  第二次点击时，才返回true。明明第一次点击的时候aUl[this.index].style.displa是隐藏的
                  不知道为什么会出现这个情况
               * */
                if(aUl[this.index].style.display=="block")
                {
                   // aUl[this.index].className="sub";
                   // 若点击的一级标题下的二级标题为block，则隐藏该二级标题并且恢复箭头
                   aUl[this.index].style.display="none";
                    this.className="";

                }
                else
                {
                    //否则，先将所有的箭头先恢复正常
                    for(var j=0;j<aLi.length;j++)
                    {
                        aLi[j].className="";
                    }
                    //再将点击的箭头添加类，即箭头旋转90度
                    this.className="current";
                    //先将所有的二级标题隐藏
                    for(var k=0;k<aUl.length;k++)
                    {
        // 和38那个对比，为何这个不能使用添加class的方法，因为sub这个class本身是none，感觉是权限问题
                       // aUl[k].className="sub";
                        aUl[k].style.display="none";
                    }
                    //再将点击的一级标题下的二级标题显示
                    //aUl[this.index].className="show";
                    aUl[this.index].style.display="block";
                }

            }
        }
    }
</script>
</head>
<body>
<ul class="nav">
    <li>1一级菜单<span></span>  <ul class="sub">
            <li>二级菜单1</li>
            <li>二级菜单1</li>
            <li>二级菜单1</li>
            <li>二级菜单1</li>
            <li>二级菜单1</li>
        </ul></li>
    <li>2一级菜单<span></span>  <ul class="sub">
            <li>二级菜单2</li>
            <li>二级菜单2</li>
            <li>二级菜单2</li>
            <li>二级菜单2</li>
            <li>二级菜单2</li>
        </ul></li>
    <li>3一级菜单<span></span>  <ul class="sub">
            <li>二级菜单3</li>
            <li>二级菜单3</li>
            <li>二级菜单3</li>
            <li>二级菜单3</li>
            <li>二级菜单3</li>
        </ul></li>
    <li>4一级菜单<span></span>  <ul class="sub">
            <li>二级菜单4</li>
            <li>二级菜单4</li>
            <li>二级菜单4</li>
            <li>二级菜单4</li>
            <li>二级菜单4</li>
        </ul></li>
    <li>5一级菜单<span></span>  <ul class="sub">
            <li>二级菜单5</li>
            <li>二级菜单5</li>
            <li>二级菜单5</li>
            <li>二级菜单5</li>
            <li>二级菜单5</li>
        </ul></li>
    <li>6一级菜单<span></span>  <ul class="sub">
            <li>二级菜单6</li>
            <li>二级菜单6</li>
            <li>二级菜单6</li>
            <li>二级菜单6</li>
            <li>二级菜单6</li>
        </ul></li>
    <li>7一级菜单<span></span>  <ul class="sub">
            <li>二级菜单7</li>
            <li>二级菜单7</li>
            <li>二级菜单7</li>
            <li>二级菜单7</li>
            <li>二级菜单7</li>
        </ul></li>
    <li>8一级菜单<span></span>  <ul class="sub">
            <li>二级菜单8</li>
            <li>二级菜单8</li>
            <li>二级菜单8</li>
            <li>二级菜单8</li>
            <li>二级菜单8</li>
        </ul></li>
</ul>
</body>
</html>