基于jQuery实现侧边栏隐藏和显示导航

最新推荐文章于 2024-08-08 16:10:15 发布

ADAMs.

最新推荐文章于 2024-08-08 16:10:15 发布

阅读量2k

点赞数 1

分类专栏： web前端文章标签： jQuery 前端侧边栏隐藏和显示导航

本文链接：https://blog.csdn.net/qq_43097201/article/details/102970921

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先上代码（实现思路在最后）：

index.html + jQuery：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>折叠式菜单特效</title>
		<link rel="stylesheet" href="css/menu.css">
		<script src="js/jquery-1.12.4.js"></script>

		<script>
			$("document").ready(function() {

				$(".menu_head+div").hide();
				$(".menu_head").click(function() {
					//判断我们下面所有标签中是否含有标记的标签list
					if ($(this).nextAll().hasClass("list")) {
						//如果有的话就显示全部
						$(this).nextAll().show();
						//同时把list标签去掉.再次进这个条件语句的时候就执行else
						$(this).nextAll().removeClass("list");
						$(this).css("background","#f1f1f1 url(img/pro_down.png) center right no-repeat");
					} else {
						//如果没有list的话就把所有的标签都隐藏起来
						$(this).nextAll().hide();
						//隐藏好了之后就加上list
						$(this).nextAll().addClass("list");
						$(this).css("background","#f1f1f1 url(img/pro_left.png) center right no-repeat");
					}
				});
			});
		</script>
	</head>
	<body>
		<ul class="menu_list">
			<li>
				<p class="menu_head">目标管理</p>
				<div class="menu_body">
					<a href="#">主题空间</a>
					<a href="#">项目任务</a>
					<a href="#">工作计划</a>
					<a href="#">日程事件</a>
					<a href="#">时间视图</a>
				</div>
				<span class="list"></span>
			</li>
			
			<li>
				<p class="menu_head">会议管理</p>
				<div class="menu_body">
					<a href="#">主题空间</a>
					<a href="#">会议安排</a>
					<a href="#">待开会议</a>
					<a href="#">已开会议</a>
					<a href="#">会议资源</a>
				</div>
				<span class="list"></span>
			</li>
			
			<li>
				<p class="menu_head">知识社区</p>
				<div class="menu_body">
					<a href="#">我的收藏</a>
					<a href="#">知识广场</a>
					<a href="#">文档中心</a>
					<a href="#">我的博客</a>
					<a href="#">文档库管理</a>
				</div>
				<span class="list"></span>
			</li>
			
			<li>
				<p class="menu_head">我的工具</p>
				<div class="menu_body">
					<a href="#">综合查询</a>
					<a href="#">通讯录</a>
					<a href="#">便签</a>
					<a href="#">计算器</a>
					<a href="#">万年历</a>
					<a href="#">常用链接</a>
				</div>
				<span class="list"></span>
			</li>
		</ul>
	</body>
</html>

css代码：

* {
    padding: 0;
    margin: 0;
}
ul {
    list-style-type: none;
    margin: 100px;
}
.menu_head {
    width: 185px;
    height: 47px;
    line-height: 47px;
    padding-left: 38px;
    font-size: 17px;
    color: #475052;
    cursor: pointer;
    border: 1px solid #e1e1e1;
    position: relative;
    margin: 0px;
    font-weight: bold;
    background: #f1f1f1 url(../img/pro_left.png) center right no-repeat;
}
.menu_list .current {
    background: #f1f1f1 url(../img/pro_down.png) center right no-repeat;
}
.menu_body {
    width: 223px;
    height: auto;
    overflow: hidden;
    line-height: 38px;
    border-left: 1px solid #e1e1e1;
    backguound: #fff;
    border-right: 1px solid #e1e1e1;
}
.menu_body a {
    display: block;
    width: 223px;
    height: 38px;
    line-height: 38px;
    padding-left: 38px;
    color: #777;
    background: #fff;
    text-decoration: none;
    border-bottom: 1px solid #e1e1e1;
}

实现效果（分别是点击前和点击后）：

实现思路：

一开始的时候我默认在<div class="menu_body">中加入了一个没有任何内容的<span class="list">的一个标记标签，这个标签用于判断我们当前是点击展开还是点击收回用的。

默认情况下，当我们点击menu_head的导航栏之后，我们通过jQuery中.click的方式来触发函数（前提是我们先把所有的menu_body和div内容隐藏了起来，设定为hide），通过判断当前this对象点击的nextAll()是否包含一个类名为list的元素，假如说有的话就把所有的list删掉，同时把当前this对象下的所有内容show()出来，最后把图片一下即可。

倘若我们想再次点击收回菜单内容，我们发现所有的list已经被删除了，所以我们得通过addClass的方式把类名为list的<span>重新加上来，这样的话我们下一次再次点击展开的时候相当于又恢复成了默认的情况。最后再把当前对象下所有的内容hide()起来就可以了。

ADAMs.

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
基于jQuery实现侧边栏隐藏和显示导航

先上代码（实现思路在最后）：index.html + jQuery：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>折叠式菜单特效</title> <link rel="stylesheet" href="css/menu.c...
复制链接

扫一扫

专栏目录