js实例-左侧菜单

原创已于 2024-09-24 15:18:44 修改 · 827 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2018-03-22 15:21:00 首次发布

javascript 专栏收录该内容

5 篇文章

订阅专栏

这是一个使用HTML、CSS和jQuery实现的左侧菜单示例。菜单包括三个部分：菜单一、菜单二和菜单三，每个菜单项点击后会展开对应的子菜单内容。子菜单默认隐藏，通过jQuery点击事件实现显示与隐藏的切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单</title>
    <script type="text/javascript" src="js/jquery.js"></script>

    <style type="text/css">
        .menu{
            height: 600px;
            width: 30%;
            float: left;
        }
        .item{
            margin-top: 5px;
        }
        .title{
            border: 1px solid #35ce96;
            line-height: 40px;
            color: #2DB3DD;
            width: 200px;
            height: 40px;
            top: 10px;
        }
        .title:hover{
            cursor: pointer;
            color: #6bff68;
            font-size: 18px;
        }
        .content ul{
            padding: 0;
            margin: 0;
        }
        .content li{
            list-style: none;
            border: 1px solid #FFDE7F;
            line-height: 30px;
            height: 30px;
            width: 150px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="edit">
    <div class="menu">
        <div class="item">
            <div class="title" id="caidan1">菜单一</div>
            <div class="content hide">
                <ul>
                    <li>111</li>
                    <li>111</li>
                    <li>111</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="title" id="caidan2">菜单二</div>
            <div class="content hide">
                <ul>
                    <li>222</li>
                    <li>222</li>
                    <li>222</li>
                </ul>
            </div>
        </div>
        <div class="item">
            <div class="title" id="caidan3">菜单三</div>
            <div class="content hide">
                <ul>
                    <li>333</li>
                    <li>333</li>
                    <li>333</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    function Show(self) {
        $(self).next().removeClass("hide").parent().siblings().children(".content").addClass("hide");
    }
    $("#caidan1").click(function () {
        Show(this);
    });
    $("#caidan2").click(function () {
        Show(this);
    });
    $("#caidan3").click(function () {
        Show(this);
    });
</script>
</body>
</html>