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. 指针使用const修饰总结

    1 double rates[5] = {1, 2, 3, 4, 5}; const double * pd = rates; 被pd指向的值不可改变,比如,不允许*pd = 20 但是pd的指向改变 ...

  2. Ubuntu16.04安装x11VNC远程桌面

    1. 安装x11vnc sudo apt-get install x11vnc 2. 设置密码 x11vnc -storepasswd 3. 修改配置文件 sudu vim /lib/systemd/ ...

  3. Dataphin数据服务系列之--API 配置、管理和消费

    研发小哥哥还在为公司里大量 API 只上不下,不可查不可用, 想找的 API 找不到而苦恼吗?业务方小姐姐还在为 API 开发时间长,业务相应不及时而抱怨吐槽吗? 铛铛铛,Dataphin 数据服务 ...

  4. sql server 2000安装程序配置服务器失败

    第一种方法 今天安装SQL Server 2000遇到了个很BT的问题,提示出下: 安装程序配置服务器失败.参考服务器错误日志和C:\Windows\sqlstp.log了解更多信息. 以前进安装目录 ...

  5. HDU - 6601 Keen On Everything But Triangle 主席树

    Keen On Everything But Triangle 感觉最近多校好多主席树的亚子,但是本人菜得很,还没学过主席树,看着队友写题就只能划水,\(WA\)了还不能帮忙\(debug\),所以深 ...

  6. 【BZOJ2555】SubString（后缀自动机，LCT）

    题意:给你一个字符串init,要求你支持两个操作 (1):在当前字符串的后面插入一个字符串 (2):询问字符串s在当前字符串中出现了几次?(作为连续子串) 你必须在线支持这些操作. 长度 <= ...

  7. 微信小程序相关操作

    显示用户基本信息 在微信小程序中,经常会碰到需要展示微信用户的基本信息,如果只是为了显示用户信息,最简单有效的办法是使用open-data,这是微信小程序内置的用于展示微信开放数据的组件,通过改变ty ...

  8. BZOJ 3294: [Cqoi2011]放棋子(计数dp)

    传送门 解题思路 设\(f[i][j][k]\)表示前\(k\)个颜色的棋子占领了\(i\)行\(j\)列的方案数,那么转移时可以枚举上一个颜色时占领的位置,\(f[i][j][k]=\sum\lim ...

  9. BZOJ 1369: [Baltic2003]Gem(树形dp)

    传送门 解题思路 直接按奇偶层染色是错的,\(WA\)了好几次,所以要树形\(dp\),感觉最多\(log\)种颜色,不太会证. 代码 #include<iostream> #includ ...

  10. datastudion 资源导入python包，编写模块

    学习文档,不懂再问. https://help.aliyun.com/document_detail/74423.html?spm=a2c4g.11186623.6.688.72635debHqgkV ...