jQuery实现风琴菜单，超级简单，一行代码！

最新推荐文章于 2022-11-28 10:26:52 发布

tom_tom_tom_xiang

最新推荐文章于 2022-11-28 10:26:52 发布

阅读量733

点赞数 1

分类专栏： js 文章标签： javascript jquery 凤琴菜单

本文链接：https://blog.csdn.net/tom_tom_tom_xiang/article/details/72957586

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

问题描述：使用jQuery实现风琴菜单的效果

代码比较简单，直接上代码了，JQuery的文件，这里没有给。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>风琴菜单</title>
 </head>
 	<style type="text/css">
		#div1{
			width:200px;
			height:400px;
			border:1px solid black;
		}
		.menu{
			height:20px;
			background:blue;
			color:white;
			border:1px solid black;
			margin-top:1px;
			cursor:pointer;
		}
		.item{
			height:18px;
			background:green;
			color:white;
			border:1px solid black;
			margin-top:1px;
		}
		.sub{
			display:none
		}
	
	</style>
 <body>
	 <div id="div1">
    	<div class="menu">办公管理</div>
    	  <div class="sub">
	    	<div class="item">人员管理</div>
	    	<div class="item">仓储管理</div>
	      </div>
    	<div class="menu">公文管理</div>
    	  <div class="sub">
	    	<div class="item">收发公文</div>
	    	<div class="item">日志管理</div>
	      </div>
    	<div class="menu">系统管理</div>
    	  <div class="sub">
	    	<div class="item">权限管理</div>
	    	<div class="item">角色管理</div>
	      </div>
    </div>
 </body>
 <script src=" jquery-1.11.1.min.js "></script>
	<script>
		$(".menu").click(function(){
				$(this).next(".sub").slideToggle("slow").siblings(".sub").slideUp("slide");
			});
	</script>
</html>

用jQuery实现，比用原生的JavaScript实现简单了很多，而且也比较容易理解.

快乐学习，快乐编程

tom_tom_tom_xiang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现风琴菜单，超级简单，一行代码！

问题描述：使用jQuery实现风琴菜单的效果代码比较简单，直接上代码了，JQuery的文件，这里没有给。风琴菜单 #div1{ width:200px; height:400px; border:1px solid black; } .menu{ height:20px; background:blu
复制链接

扫一扫