一. 链式调用的含义

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素

.children('ul') //该元素下面的ul子元素

.slideDown('fast') //高度从零变到实际高度来显示ul元素

.parent()  //跳到ul的父元素，也就是id为div1的元素

.siblings()  //跳到div1元素平级的所有兄弟元素

.children('ul') //这些兄弟元素中的ul子元素

.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

　　

二. 层级菜单实例

实现菜单项的打开与自动折叠，效果图如下

<!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 type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">

		$(function(){

			/*效果1

			$('.level1').click(function() {

				$(this).next().toggleClass('current');

			});

			*/

			/*效果2

			$('.level1').click(function() {

				$(this).next().slideToggle();

			});

			*/

        //效果3，点开某一个菜单项的同时，自动关闭其他菜单项

			$('.level1').click(function() {

				$(this).next().slideDown().parent().siblings().children('ul').slideUp();

			});

		});

	</script>

</head>

<body>

	<ul class="menu">

		<li>

			<a href="#" class="level1">水果</a>

			<ul class="current">

				<li><a href="#">苹果</a></li>

				<li><a href="#">梨子</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>

		<li>

			<a href="#" class="level1">肉类</a>

			<ul>

				<li><a href="#">内蒙古羊肉</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>

		<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之链式调用

    链式调用的形式其实就是对象调用一连串的方法.为什么能连续调用这么多的方法?因为调用方法返回调用的对象,于是乎就可以一如既往,一往无前地调用下去.链式调用的原理就是在方法中返回执行上下文this,每次调 ...

  2. Javasript设计模式之链式调用

    写过jquery的可能都知道,jquery里面可以很方便的使用以下代码: // 不使用链式调用 const element = $(ele); element.addClass('red'); ele ...

  3. spring aop 之链式调用

    关关雎鸠,在河之洲.窈窕淑女,君子好逑. 概述 AOP(Aspect Orient Programming),我们一般称为面向方面(切面)编程,作为面向对象的一种补充,用于处理系统中分布于各个模块的横 ...

  4. Jquery复习（三）之链式调用

    通过 jQuery,可以把动作/方法链接在一起. Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上). jQuery 方法链接 直到现在,我们都是一次写一条 jQue ...

  5. 深入了解jQuery之链式结构

    本文是在阅读了Aaron艾伦的jQuery源码解析(地址:http://www.imooc.com/learn/172)后的个人体会以及笔记.在这里感谢艾伦老师深入浅出的讲解!! 1 什么是链式? 先 ...

  6. mark jquery 链式调用的js原理

    我们在使用jquery的时候会用到类似$("#id").css('color','red').show(200); 这样写有点减少代码量,减少了逐步查询DOM的性能损耗: js 原 ...

  7. jQuery链式调用

    <script> var arr = function(){ return new arr.prototype.init(); } arr.prototype.init = functio ...

  8. jQuery之链式编程

    使用的思想:隐式迭代. <button>快速</button> <button>快速</button> <button>快速</but ...

  9. JavaScript设计模式-8.链式调用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 114. Flatten Binary Tree to Linked List (Stack, Tree; DFS)

    Given a binary tree, flatten it to a linked list in-place. For example, Given 1 / \ 2 5 / \ \ 3 4 6 ...

  2. 69. Sqrt(x) (Divide-and-Conquer)

    Implement int sqrt(int x). Compute and return the square root of x. 注意: 计算平方的时候可能会溢出,所以mid要定义为long 另 ...

  3. 支付宝soa框架发展思路（转载）

    大家好,这里是首届QCon Beijing的现场,现在坐在我的旁边是的支付宝的首席架构师程立.先给大家介绍一下,支付宝架构发展到今天,经历哪些时期,都有哪些里程碑? 我回忆一下,支付宝系统架构发展大概 ...

  4. code1225 八数码Bfs

    Bfs搜索 1.把棋盘直接作为状态: #include<iostream> #include<cstring> #include<queue> #include&l ...

  5. ubuntu14.04下安装qt5

    1.sudo apt-get install build-essential 2.先打开终端快捷键ctrl+t 3. 然后输入: sudo apt-get install cmake qt5-defa ...

  6. GC Roots的理解以及如何判断一个对象为“垃圾”

    http://blog.csdn.net/Great_Smile/article/details/49935307 这篇博客中讲解了哪些可以作为GC Roots以及如何判断一个对象为垃圾

  7. pagespeed模块安装——Nginx、Tengine

    1.安装好nginx或者tengine 2.下载pagespeed模块并且解压 sudo mkdir -p /usr/local/tengine/modules wget https://github ...

  8. SQL的Join语法

    对于SQL的Join,在学习起来可能是比较乱的.我们知道,SQL的Join语法有很多inner的,有outer的,有left的,有时候,对于Select出来的结果集是什么样子有点不是很清楚.Codin ...

  9. Word2013文章如何直接发布到CSDN博客

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  10. 编写高质量代码改善C#程序的157个建议——建议133：用camelCasing命名私有字段和局部变量

    建议133:用camelCasing命名私有字段和局部变量 私有变量和局部变量只对本类型负责,它们在命名方式也采用和开放的属性及字段不同的方法.camelCasing很适合这类命名. camelCas ...