二级左菜单隐藏与显示

最新推荐文章于 2023-06-26 16:17:31 发布

情迷不是情谜

最新推荐文章于 2023-06-26 16:17:31 发布

阅读量516

点赞数 1

分类专栏： jQuery 左菜单文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43744103/article/details/113481076

版权

jQuery 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

左菜单

1 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单隐藏与显示</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .hide {
            display: none;
        }

		.left-menu {
			background-color: dimgrey;
			color: white;
			position: fixed;
			left: 0;
			top: 0;
			width: 220px;
			height: 100%;
		}

		.left-menu div li a {
			font-size: 14px;
			box-sizing: border-box;
			cursor: pointer;
			position: relative;
			font-weight: 600;
			padding: 20px 20px 20px 85px;
			display: block;
			color: aqua;
            background: slategray;
		}

		.menu-title{
			padding: 20px 20px 20px 75px;
			display: block;
			color: whitesmoke;
            height: 25px;
            background: #869fb1;
            border-bottom-color: aqua;
		}
    </style>
</head>
<body>

<div class="left-menu">
    <div class="menu-title">菜单一</div>
    <div class="menu-items hide">
        <ul>
            <li><a href="">111</a></li>
            <li><a href="">222</a></li>
            <li><a href="">333</a></li>
        </ul>
    </div>
    <div class="menu-title">菜单二</div>
    <div class="menu-items hide">
        <ul>
            <li><a href="">111</a></li>
            <li><a href="">222</a></li>
            <li><a href="">333</a></li>
        </ul>
    </div>
    <div class="menu-title">菜单三</div>
    <div class="menu-items hide">
        <ul>
            <li><a href="">111</a></li>
            <li><a href="">222</a></li>
            <li><a href="">333</a></li>
        </ul>
    </div>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    // 需求分析
    // 找到所有的.menu-title标签,绑定点击事件
        $(".menu-title").click(function () {
               // 点击事件具体要做的事儿
        // 1. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)
//            $(this).next().removeClass("hide");
            $(this).next().toggleClass("hide");
            // 2. 把其他的.menu-items隐藏,添加hide类
            $(this).next().siblings(".menu-items").addClass("hide");
        })


//    $(".menu-title").click(function () {
//        // 1. 找到所有的.menu-items, 隐藏
//        var $currMenuitem = $(this).next();
//        $(".menu-items").not($currMenuitem).addClass("hide");  // 所有的二级菜单都是隐藏的
//        // 2. 找到当前点击菜单下面的.menu-items,把它显示出来(移除hide类)
//        $(this).next().toggleClass("hide");
//    })

</script>
</body>
</html>

效果：
在这里插入图片描述

情迷不是情谜

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
二级左菜单隐藏与显示

代码：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>左侧菜单隐藏与显示</title> <style> * { margin: 0; padding: 0; } .hide { d
复制链接

扫一扫