HTML

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>jquery</title>

		<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>

		<script type="text/javascript" src="js/try.js" ></script>

		<style>

			ul li {

				list-style: none;

			}

		    ul {

		    	padding:0;

		    	margin: 0;

		    }

		    .main {

		      background-image: url(img/2.PNG);

		      background-repeat:repeat-x;

		      width:100px;

		    }

		    li {

		    	background-color: #eeeeee;

		    }

		    a {

		    	display: block;

		    	text-decoration: none;

		    	width:80px;

		    	padding-left: 20px;

		    	padding-top: 4px;

		    	padding-bottom: 4px;

		    }

		   .main a {

		   	color: white;

		   	background-image:url(img/向右箭头.png);

		   	background-repeat: no-repeat;

		   	background-position:2px center ;

		   	background-size:20px;

		   }

		  .main li a{

		  	color:black ;

		  	background-image: none;

		  }

		  .main ul {

		  	display: none;

		  }

		   </style>

	</head>

	<body>

	 <ul>

	 	<li class="main">

	 		<a href="#">菜单1</a>

	 		<ul>

	 			<li><a href="#">子菜单1</a></li>

	 			<li><a href="#">子菜单2</a></li>

	 		</ul>

	 	</li>

	 		<li class="main">

	 		<a href="#">菜单2</a>

	 		<ul>

	 			<li><a href="#">子菜单1</a></li>

	 			<li><a href="#">子菜单2</a></li>

	 		</ul>

	 	</li>

	 		<li class="main">

	 		<a href="#">菜单3</a>

	 		<ul>

	 			<li><a href="#">子菜单1</a></li>

	 			<li><a href="#">子菜单2</a></li>

	 		</ul>

	 	</li>

	 </ul>

	</body>

</html>

　　try.js

$(document).ready(function(){

	$(".main>a").click(function() {

		var ulNode=$(this).next("ul");

		//第1种方法

		/* 

		if(ulNode.css("display")=="none") {

			ulNode.css("display","block");

		}

		else{

	      ulNode.css("display","none");

		}

		*/

		//第2种方法

		//ulNode.show();

		//ulNode.hide();

		//第3种方法

		//ulNode.toggle(500);//fast  normal low

		//第4种方法

		//ulNode.slideDown();

		//ulNode.slideUp();

		//第5种方法

		ulNode.slideToggle();

	})

});

　　效果：

2017-09-22   12:11:41

jQuery 菜单 垂直菜单实现的更多相关文章

  1. 实例：用jQuery实现垂直和水平下拉 菜单

    主要是利用jQuery来实现垂直菜单和水平菜单.实现效果如图: 第一步,创建一个HTML文件,如图,包含两个ul.当然把jquery库也引入进去了. <!DOCTYPE html> < ...

  2. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  3. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  4. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  5. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

  6. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  7. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  8. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

  9. jQuery弹性滑动导航菜单实现思路及代码

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...

随机推荐

  1. TLSv网络安全标准，会话加密协议展望未来

    本文是关于TLSv1.3采用的三部分系列的第三部分也是最后一部分.它解决了网络加密和监控的选项,包括备用会话加密协议. 通过TLSv1.3的批准,并在IETF出版物队列中,是时候考虑部署选项和障碍,并 ...

  2. centos 6.5 关闭防火墙

    关闭防火墙分为临时关闭和永久关闭.临时关闭重启系统后恢复正常,永久关闭重启系统后仍然是关闭状态 临时关闭与开启 service iptables stop service iptables start ...

  3. DELPHI FMX IOS模拟器调试时出现No SDKs could be found

    解决办法: 在OSX里打开XCODE,​点击XCODE菜单->​Perferences->Locations​在Commond  Line Tools选择XCODE ​

  4. webpack对icon-font图片的处理

    一.对图片的处理 安装url-loader 然后再loaderli配置这样会把图片打包成base64格式 { test: /\.(gif|png|jpg)\??.*$/, loader: 'url-l ...

  5. AGC013 E Placing Squares——模型转化+矩阵乘法

    题目:https://atcoder.jp/contests/agc013/tasks/agc013_e 边长的平方,可以看做是在该范围内放两个不同的球的方案数.两个球可以重合. 题意变成:给长为 n ...

  6. 2019 牛客暑期多校 第三场 F Planting Trees (单调队列+尺取）

    题目:https://ac.nowcoder.com/acm/contest/883/F 题意:求一个矩阵最大面积,这个矩阵的要求是矩阵内最小值与最大值差值<=m 思路:首先我们仔细观察范围,我 ...

  7. 经典JS 判断上传文件大小和JS即时同步电脑时间

    我也是新手,还是一个JS笨,有一些网站要实现的功能要自己写么? 答案是不会,去问同事大佬吧,闲简单.就在晚上看了一些其他大佬们写的JS效果, 代码很少.占用网站CPU也小的多.可以一用, 废话少扯.代 ...

  8. 出席分布式事务Seata 1.0.0 GA典礼

    前言 图中那个红衣服的就是本人 什么是分布式事务 分布式事务就是指事务的参与者.支持事务的服务器.资源服务器以及事务管理器分别位于不同的分布式系统的不同节点之上. 简单的说,就是一次大的操作由不同的小 ...

  9. 解决Flutter boost模块化加入到原有android项目后，首次加载过慢的问题

    由于Flutter boost目前还没有很好的解决方案,所以只能魔改了,大致的思路就是在刚打开app的时候就初始化一个不可见的Flutter页面,让其自动注册&初始化. 先编写一个Flutte ...

  10. laravel artisan工具的使用

    Artisan是laravel中自带的命令行工具的名称(一个php文件,放在laravel框架的根目录,因此命令的使用都是在根目录下的). 它提供了一些对应用开发帮助的命令,可以使用list命令列出所 ...