jQuery实现左侧菜单栏

最新推荐文章于 2020-12-07 13:55:08 发布

看到代码头都是大的

最新推荐文章于 2020-12-07 13:55:08 发布

阅读量2.3k

点赞数 1

本文链接：https://blog.csdn.net/ym5209999/article/details/104998607

版权

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

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

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

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单栏</title>
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <script src="../js/jquery-3.3.1.min.js" type="text/javascript"></script>
</head>
<body>

<div class="all">


    <div class="menu">
        <ul class="first">
            <li>一级目录1
                <ul class="sec">
                    <li>1-1</li>
                </ul>
                <div class="content">1-1：内容</div>
            </li>
            <li>一级目录2
                <ul class="sec">
                    <li>2-1</li>
                    <li>2-2</li>
                </ul>
                <div class="content">2-1：内容</div>
                <div class="content">2-2：内容</div>
            </li>
            <li>一级目录3
                <ul class="sec">
                    <li>3-1</li>
                    <li>3-2</li>
                    <li>3-3</li>
                </ul>
                <div class="content">3-1：内容</div>
                <div class="content">3-2：内容</div>
                <div class="content">3-3：内容</div>
            </li>
            <li>一级目录4
                <ul class="sec">
                    <li>4-1</li>
                    <li>4-2</li>
                    <li>4-3</li>
                    <li>4-4</li>
                </ul>
                <div class="content">4-1：内容</div>
                <div class="content">4-2：内容</div>
                <div class="content">4-3：内容</div>
                <div class="content">4-4：内容</div>
            </li>
        </ul>
    </div>

    <div class="clear"></div>
</div>
<script src="../js/index.js" type="text/javascript"></script>
</body>
</html>

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.