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. loj6177 「美团 CodeM 初赛 Round B」送外卖2 最短路+状压dp

    题目传送门 https://loj.ac/problem/6177 题解 一直不知道允不允许这样的情况:取了第一的任务的货物后前往配送的时候,顺路取了第二个货物. 然后发现如果不可以这样的话,那么原题 ...

  2. golang中最大协程数的限制（线程）

    golang中最大协程数的限制 golang中有最大协程数的限制吗?如果有的话,是通过什么参数控制呢?还是通过每个协程占用的资源计算? 通过channel控制协程数的就忽略吧. 以我的理解,计算机资源 ...

  3. Pycharm的debug单步调试

    首先设置断点,点击行号显示的一侧,在指定行设置断点.比如这里,我们设断点在创建对象时: .如果这时我们直接右键run这个代码.他还是会直接运行,不会理会断点 结果 所以要右键选择run下面的debug ...

  4. 验证码生成（servlet）

    一 效果如下: 二 java 代码如下: import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import j ...

  5. Delphi Treeview 用法（概念、属性、添加编辑插入节点、定位节点、拖拽等）

    今天再细研究了一下Treeview的用法,网上虽然总结了很多,但是还是有很多节点没有讲到了,也给使用中遇到很多问题.特地总结一下: 1.概念 Treeview用于显示按照树形结构进行组织的数据.Tre ...

  6. flask中间件请求流程

    from flask import Flask,session,url_for,request,flash,get_flashed_messages app = Flask(__name__) app ...

  7. 如何在Ubuntu下搭建tftp服务器

    远程桌面连接工具   今天开始调试arm的板子,要通过tftp下载到板子上,所以又要配置tftp服务器,真的烦死了… (本人酷爱装系统,所以经常都要搞配置) 因为之前已经在Ubuntu下搭建过很多次t ...

  8. SGU 176 (有源汇最小流)

    转载:http://blog.csdn.net/dan__ge/article/details/51207951 题意:n个节点,m条路径,接下来m行a,b,c,d,如果d等于1,则a到b的流量必须为 ...

  9. CSS-使整个页面上的全部元素可编辑

    # [在线预览](https://jsfiddle.net/1010543618/6zu1gush/) ## 方法一 - 使用 html 的 contenteditable 属性: [HTML 5 全 ...

  10. SQL 交叉连接与内连接

    交叉连接 ,没有任何限制方式的连接. 叫做交叉连接. 碰到一种SQL 的写法. select * from  t1,t2 .     这其实是交叉连接 .   t1  是三条 ,  t2 是两条.  ...