jquery商品分类侧边栏列表商城导航菜单插件_jQuery 实现左进左出侧边导航菜单栏

源码下载：叁贰壹/jQuery 实现左进左出左侧侧边栏导航菜单

查看效果：http://songothao.gitee.io/zuojinzuochuzuocecebianlan/

知乎视频​www.zhihu.com

jQuery 代码如下：
结合下面的html结构，在这里解释一下 jQuery 源码
1. jQuery 是隐式迭代的，所以我们不用像原生 js 那样去给每个相同项添加点击事件，只需要 $('').click() 即可。
2. jQuery 选择器 siblings() 是指选中所有除了自己之外的兄弟元素，如果有指定，那么就是指定的所有除自己之外的兄弟元素。
3. jQuery 选择器 parent() 是选中自己的父级元素， children() 是选中自己的子级元素（如果有指定，就是选中指定的子级元素--不是孙子是儿子）。
4. 动画队列（连续多次点击，老实憨厚的程序等着一个一个执行完毕），解决-->停止排队的方法 stop()。
5. 元素的显示隐藏以及切换显示隐藏的函数分别是 show() hide() toggle()，有两个参数（均可省略），第一个参数是时间参数，第二个是回调函数。

$(function() {
    $('.nav-title').click(function() {
        $(this).siblings('.nav-content').stop().toggle(500).parent().siblings('.nav-menu').children('.nav-content').hide(500);
    })
})

如果想要改成下拉抽屉效果，把 jQuery 代码换成如下代码即可

$(function() {
    $('.nav-title').click(function() {
        $(this).siblings('.nav-content').stop().slideToggle(500).parent().siblings('.nav-menu').children('.nav-content').slideUp(500);
    })
})

html 代码如下：
我把重复的部分删掉了，这样看结构比较清晰，需要全部源码可以到码云下载

    <div class="content">
        <div class="content-left">
            <div class="left-title"><a href="#">叁贰壹商城管理后台</a></div>
            <!-- 分割线 -->
            <div class="seg"></div>
            <!-- 菜单栏导航 -->
            <div class="nav">
                <!-- 每一个菜单项 -->
                <div class="nav-menu">
                    <!-- 菜单项的标题 -->
                    <div class="nav-title">商品管理</div>
                    <!-- 菜单项的子标题 -->
                    <div class="nav-content">
                        <a href="#">商品列表</a>
                        <a href="#">添加商品</a>
                    </div>
                </div>
            </div>
            <div class="seg"></div>
        </div>
    </div>

css 代码：放在最后，往下拉就可以看到。

CSDN：https://blog.csdn.net/weixin_43148062

简书：https://www.jianshu.com/u/45339cbb7573

.content .content-left {
    width: 20%;
    height: 100%;
    background-image: linear-gradient(0deg, #E91E63, #9C27B0, #673AB7);
    float: left;
}

.content .content-left a {
    text-decoration: none;
    color: #fff;
}

.content .content-left .left-title {
    height: 60px;
    width: 100%;
    font-size: 24px;
    text-align: center;
    line-height: 60px;
}

.content .content-left .seg {
    width: 100%;
    height: 2px;
    background-color: rgba(0, 0, 0, .2);
    margin: 5px 0;
}

.content .content-left .nav .nav-menu .nav-title {
    color: #fff;
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    cursor: pointer;
}

.content .content-left .nav .nav-menu .nav-content {
    display: none;
}

.content .content-left .nav .nav-menu .nav-content a {
    color: #bbb;
    display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 12px;
    background-color: rgba(0, 0, 0, .1);
}

.content .content-left .nav .nav-menu .nav-content a:hover {
    background-color: rgba(0, 0, 0, .2);
    color: #fff;
}

.content .content-right {
    width: 80%;
    height: 100%;
    margin-left: 20%;
}