使用jQuery制作左侧导航栏，并用ES6 Class封装起来

使用jquery制作左侧导航，并用ES6的class封装

首先是html结构：

<ul class="left-nav">
	<li>
	    <a href="javascript:;" class="nav-pic1">导航一
	    <img class="iconfont"  src="jiantouxiangxia.png" alt=""></a>
	    <ol class="left-nav-children" style="display: none">
	        <li class="selectNav">列表</li>
	    </ol>
	</li>
	<li>
	    <a href="javascript:;" class="nav-pic2">导航二
	    <img class="iconfont" src="jiantouxiangxia.png" alt=""></a>
	    <ol class="left-nav-children" style="display: none">
	        <li>列表</li>
	    </ol>
	</li>
	<li>
	    <a href="javascript:;" class="nav-pic3">导航三
	    <img class="iconfont" src="jiantouxiangxia.png" alt=""></a>
	    <ol class="left-nav-children" style="display: none">
	        <li>列表</li>
	    </ol>
	</li>
</ul>

如果你想直接复制直接使用的话，html结构必须要跟上面一样的才可以。（图片别忘了更改）

---

然后是JS代码了，我先放上没封装之前的代码：

 // 当前的ol
 let ol = $('.left-nav-children')

 $('.nav-pic1').click(function () {
        // img
        let i = $(this).children()
        // 其他的ol
        let otherOl = $('.nav-pic1').parent().siblings().children()
        // 其他的img
        let otherI = otherOl.children()
        // 添加类，展开或收缩
        ol.eq(0).toggleClass('activeShow')
        // 当点击的元素展开的时候，把其他的隐藏起来
        if (ol.eq(0).css('display') === 'block') {
            otherOl.removeClass('activeShow')
            // console.log($(this).children()[0].src)
            i.attr('src', 'jiantouxiangshang.png')
            // 在展开的时候，同时把其他图标切换回原来的样
            otherI.attr('src', 'jiantouxiangxia.png')
        } else {
            i.attr('src', './views/images/jiantouxiangxia.png')
        }

    })

上面的代码里面有一个是添加图标，如果你没有的话需要先把这段代码删除，每段代码的含义注释已经写的很清楚了。
这段代码是点击第一个li标签后的代码，如果要在多一个需要另外在写这么一大堆代码，所以使用ES6的class，封装一下
代码为：

class UnfoldShrink {
		// 这里定义接收的参数，并赋值给this，下面调用的时候直接this.xxx就可以了
        constructor(name, num) {
            this.name = name
            this.num = num
        }
        // 这里定义了一个toggle方法
        toggle() {
            let i = $(this.name).children()
            let otherOl = $(this.name).parent().siblings().children()
            let otherI = otherOl.children()

            ol.eq(this.num).toggleClass('activeShow')
            // ol.eq(this.num).slideDown('slow')
            if (ol.eq(this.num).css('display') === 'block') {
                otherOl.removeClass('activeShow')
                i.attr('src', 'jiantouxiangshang.png')
                otherI.attr('src', 'jiantouxiangxia.png')
            } else {
                i.attr('src', 'jiantouxiangxia.png')
            }
            return
        }
    }


 // 调用的时候new 一个实例，然后传入参数即可
$('.nav-pic1').click(function () {
        let li = new UnfoldShrink(this, 0)
        li.toggle()
  })

// 如果在多添一个列表，直接这样添加即可

$('.nav-pic2').click(function () {
        let li = new UnfoldShrink(this, 1)
        li.toggle()
})

---

还有必要的css代码：

// 这是切换的时候必须的类
.activeShow {
    display: block !important;
}


// 下面为导航的样式表
.left-nav {
    list-style: none;
}

.left-nav>li {
    position: relative;

    line-height: 31px;
    cursor: pointer;
}

.left-nav>li a {
    position: relative;
    display: inline-block;
    width: 100%;

    box-sizing: border-box;
    padding: 12px 0;

    color: inherit;
    text-decoration: none;
    text-indent: 30px;
}

.left-nav>li a:hover {
    background-color: rgba(189, 195, 199, .5);
}

.left-nav>li a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0px;
    bottom: 0;
    width: 5px;
    background-color: #009688;
    transform-origin: center;
    transform: scaleY(0);
    transition: transform 0.5s ease;
}

.left-nav>li a:hover::before {
    transform: scaleY(1);
}

.left-nav .left-nav-children {
    transition: all .25s;
    
    margin-left: 30px;
    list-style: none;
}

.left-nav .left-nav-children>li {
    padding: 5px 0 5px 20px;
}
.iconfont {
    position: absolute;
    right: 0;
    top: 50%;
    width: 20px;
    height: 20px;

    margin-top: -10px;
    margin-right: 16px;
}