效果图：

HTML代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>层级菜单</title>

	<style type="text/css">

		body{

			font-family:'Microsoft Yahei';

		}

		body,ul{

			margin:0px;

			padding:0px;

		}

		ul{list-style:none;}

		.menu{

			width:200px;

			margin:20px auto 0;

		}

		.menu .level1,.menu li ul a{

			display:block;

			width:200px;

			height:30px;

			line-height:30px;

			text-decoration:none;

			background-color:#3366cc;

			color:#fff;

			font-size:16px;

			text-indent:10px;

		}

		.menu .level1{

			border-bottom:1px solid #afc6f6;

		}

		.menu li ul a{

			font-size:14px;

			text-indent:20px;

			background-color:#7aa1ef;

		}

		.menu li ul li{

			border-bottom:1px solid #afc6f6;

		}

		.menu li ul{

			display:none;

		}

		.menu li ul.current{

			display:block;

		}

		.menu li ul li a:hover{

			background-color:#f6b544;

		}

	</style>

	<script src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">

	$(function(){

		// 点击一级菜单，显示二级菜单

		// $('.level1').click()

		var $level1 = $('.level1')

		$level1.click(function(){

			$(this).next().slideDown()

			// 隐藏：这个人的父级的兄弟的儿子ul

			$(this).parent().siblings().children('ul').slideUp()

		})

	})

	</script>

</head>

<body>

	<ul class="menu">

		<li>

			<a href="#" class="level1">手机</a>

			<ul class="current">

				<li><a href="#">iPhone X 256G</a></li>

				<li><a href="#">红米4A 全网通</a></li>

				<li><a href="#">HUAWEI Mate10</a></li>

				<li><a href="#">vivo X20A 4GB</a></li>

			</ul>

		</li>

		<li>

			<a href="#" class="level1">笔记本</a>

			<ul>

				<li><a href="#">MacBook Pro</a></li>

				<li><a href="#">ThinkPad</a></li>

				<li><a href="#">外星人(Alienware)</a></li>

				<li><a href="#">惠普(HP)薄锐ENVY</a></li>

			</ul>

		</li>

		<li>

			<a href="#" class="level1">电视</a>

			<ul>

				<li><a href="#">海信(hisense)</a></li>

				<li><a href="#">长虹(CHANGHONG)</a></li>

				<li><a href="#">TCL彩电L65E5800A</a></li>

			</ul>

		</li>

		<li>

			<a href="#" class="level1">鞋子</a>

			<ul>

				<li><a href="#">新百伦</a></li>

				<li><a href="#">adidas</a></li>

				<li><a href="#">特步</a></li>

				<li><a href="#">安踏</a></li>

			</ul>

		</li>

		<li>

			<a href="#" class="level1">玩具</a>

			<ul>

				<li><a href="#">乐高</a></li>

				<li><a href="#">费雪</a></li>

				<li><a href="#">铭塔</a></li>

				<li><a href="#">贝恩斯</a></li>

			</ul>

		</li>

	</ul>

</body>

</html>

　　

JQuery实现层级菜单的更多相关文章

  1. jquery之链式调用，层级菜单

    一. 链式调用的含义 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $('#div1') // id为div1的元素 .children('ul ...

  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. rake 任务参数传递问题解决

    原文 :  https://robots.thoughtbot.com/how-to-use-arguments-in-a-rake-task namespace :tweets do desc 'S ...

  2. PHP函数的引用传递（地址传递）

    PHP中的引用: 在PHP中,变量名和变量内容是不一样的,因此同样的内容可以有不同的名字.在PHP中引用意味着用不同的名字访问同一个变量的内容. 比如:$a = 'hello world'; $b = ...

  3. phpcms v9 安装

    把文件放到根目录下install文件夹下, 打开127.0.0.1:89/install/index.html

  4. VS2013 自定义项目模板以及制作.vsix文件

    一.环境检查 打开VS2013新建项目.如果在"其他项目类型"中不包含扩展性节点,则需要下载并安装vs2013 SDK. 二.创建项目模板 1,在VS中新建一个类库项目(此处仅以类 ...

  5. Oracle数据库触发器使用（删除触发）

    当我们需要用到触发器的时候,还是很方便,你会指定当我在操作某一事件时触发效果完成我所希望完成的事情:这就是触发器, 下面我给大家上一串代码,这是一个当我在操作删除事件操作时候,我希望把即将删除那条数据 ...

  6. Struts2_结果类型_resulttype_1

    看下面的例子: 一般使用4种:dispatcher(容器内跳转到JSP页面).redirect(重定向到jsp页面).chain(容器内跳转到另一个Action).redirectAction(重定向 ...

  7. Azure 2 月新公布

    Azure 2 月新发布:关于虚机和云服务的降价通告,Azure SQL 数据仓库正式发布,Microsoft 认知服务:人脸识别 API 定价模式和名称更新,以及计量名称变更 关于虚机和云服务的降价 ...

  8. 只为更快、更省、更安全的 Azure CDN

    来来来!小编今天要公布一件大事啦: 经过最近一次更新,Azure CDN 高级版服务 HTTPS SSL 证书的申请方式有所改进啦,除了现有的 Azure CDN 代为申请证书外,还支持用户自己申请的 ...

  9. hive自定义UDTF函数叉分函数

    hive自定义UDTF函数叉分函数 1.介绍 从聚合体日志中需要拆解出来各子日志数据,然后单独插入到各日志子表中.通过表生成函数完成这一过程. 2.定义ForkLogUDTF 2.1 HiveUtil ...

  10. shell脚本学习（1）列出一组IP内所有活动主机

    1.用ping命令编写脚本来查询一组IP地址同时检查他们是否处于活动状态 [zhi@centos7 ~]$ vi CheckHostStatus.sh [zhi@centos7 ~]$ ll 总用量 ...