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. vue+element-ui 实现分页（根据el-table内容变换的分页）

    官方例子 官方提示: 设置layout,表示需要显示的内容,用逗号分隔,布局元素会依次显示.prev表示上一页,next为下一页,pager表示页码列表,除此以外还提供了jumper和total,si ...

  2. ES5和ES6数组方法

    ES5 方法 indexOf和lastIndexOf 都接受两个参数:查找的值.查找起始位置不存在,返回 -1 :存在,返回位置.indexOf 是从前往后查找, lastIndexOf 是从后往前查 ...

  3. C/C++ C++ 11 std::function和std::bind用法

    std::bind() std::bind 主要用于绑定生成目标函数,一般用于生成的回调函数,cocos的回退函数都是通过std::bind和std::function实现的.两个点要明白: 1.绑定 ...

  4. dotnet 跨平台编译发布

    dotnet publish 命令,bash脚本如下(Windows安装git即可建议sh关联) publish.sh #!/usr/bin/env bash # one line command: ...

  5. 【PBFT】拜占庭容错

    共识机制堪称区块链的核心.我们知道,EOS.Hyperledger以及Stellar等著名的项目,都采用了BFT(拜占庭容错)共识机制,那么,BFT到底是什么鬼?和其它共识机制相比,又有什么优势和特点 ...

  6. HihoCoder - 1673 （单调队列)

    题目:https://vjudge.net/contest/319166#problem/A 题意:有一个01矩阵,求一个最大子矩阵面积,这个矩阵要求里面都是01间隔,没有0或1连续 思路:这个题其实 ...

  7. Win7、Win10、Linux局域网文件共享

    目录 1.WIN7系统局域网文件共享 2.WIN10系统局域网文件共享 3.Linux 局域网文件共享 WIN7系统局域网文件共享 步骤一: 打开网络和共享中心----更改高级共享设置 步骤二: 选择 ...

  8. 【Java架构：持续交付】一篇文章搞掂：持续交付理论

    一.持续集成.持续交付.DevOps概念,关系等 持续集成(Continuous integration/CI) 持续交付(Continuous delivery/CD) 持续部署() 持续 (Con ...

  9. 四两拨千斤，ARM是如何运作、靠什么赚钱的

    在智能手机.平板大行其道的今天,ARM这个名字我们几乎每天都要见到或者听到几次,作为编辑的我更是如此,每天涉及到的新闻总是或多或少跟ARM扯上关系,它还与Intel.AMD.NVIDA等公司有说不清道 ...

  10. 分布式架构下的会话追踪实践【基于Cookie和Redis实现】

    分布式架构下的会话追踪实践[基于Cookie和Redis实现] 博客分类: NoSQL/Redis/MongoDB session共享rediscookie分布式架构session 在单台Tomcat ...