jQuery实现左侧菜单栏

使用jQuery实现左侧菜单选项，根据选择的菜单，显示相应的内容，点击菜单目录的时候，第一次点击打开，第二次点击关闭，类似于事件反转。（点击二级目录后，一级目录任为打开状态）

默认效果如下(默认状态下，二级菜单全部隐藏，内容为一级目录1下面的第一个)：

看了效果，是该上代码了。项目结构如下：

index.html

    
    
    
    






    

        

            
一级目录1
                

                    
1-1
                
                
1-1：内容
            
            
一级目录2
                

                    
2-1
                    
2-2
                
                
2-1：内容
                
2-2：内容
            
            
一级目录3
                

                    
3-1
                    
3-2
                    
3-3
                
                
3-1：内容
                
3-2：内容
                
3-3：内容
            
            
一级目录4
                

                    
4-1
                    
4-2
                    
4-3
                    
4-4
                
                
4-1：内容
                
4-2：内容
                
4-3：内容
                
4-4：内容
            
        
    

    

style.css

* {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

.clear {
    clear: both;
}

.all {
    width: 800px;
    margin: auto;
}

.menu {
    float: left;
    width: 200px;
    text-align: center;
}

.menu .first {
    position: relative;
    background: #dddddd;
}

.menu .first > li {
    line-height: 36px;
    color: red;
}

.menu .first > li .sec {
    background: #cccccc;
}

.menu .first > li .sec > li {
    color: blue;
}

.menu .first > li .sec > li:hover {
    color: #ffffff;
    background: aqua !important;
}

.content {
    position: absolute;
    left: 200px;
    top: 0;
    float: left;
    width: 600px;
    background: pink;
}

index.js

var firstList = $('.first > li'); // 抓取一级菜单 li
var secList = $('.sec'); // 抓取二级菜单的ul，便于操作
secList.hide();

for (var i = 0; i < secList.length; i++) {
    firstList.eq(i).children('.content').hide();
}

firstList.eq(0).children('.content').eq(0).show(); // 默认显示1.1下面的内容

var ind = 0; // 定义变量，存储点击一级菜单的下标

// 一级菜单的点击事件
firstList.click(function () {
    ind = $(this).index();

    if (secList.eq(ind).hasClass('show')) {
        for (var j = 0; j < secList.length; j++) {
            secList.eq(j).hide();
        }
        secList.eq(ind).removeClass('show');
    } else {
        for (var k = 0; k < secList.length; k++) {
            secList.eq(k).hide().removeClass('show');
        }
        secList.eq(ind).show();
        secList.eq(ind).addClass('show');
    }
});

// 二级菜单的点击事件
$('.sec > li').click(function (event) {
    var sec = $(this).index();

    for (var i = 0; i < secList.length; i++) {
        firstList.eq(i).children('.content').hide();
    }
    firstList.eq(ind).children('.content').eq(sec).show();

    event.stopPropagation(); // 阻止事件冒泡
});

如有其他更加简洁的方式，也可以同我一起分享。

链接: jquery-3.3.1.min.js.