一. 链式调用的含义

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. JAVA heap space 内存溢出

    3月28日开始使用JAVA调用SAP RFC后提示内存溢出 尝试增加set java_OPTS.....但仍然提示内存溢出 最终设置方法

  2. 01 lucene基础 北风网项目培训 Lucene实践课程 索引

    在创建索引的过程中IndexWriter会创建多个对应的Segment,这个Segment就是对应一个实体的索引段.随着索引的创建,Segment会慢慢的变大.为了提高索引的效率,IndexWrite ...

  3. C++ std::vector

    std::vector template < class T, class Alloc = allocator<T> > class vector; // generic te ...

  4. static_cast, dynamic_cast, reinterpret_cast, const_cast区别比较

    隐式转换(implicit conversion) ; int b; b=a; short是两字节,int是四字节,由short型转成int型是宽化转换(bit位数增多),编译器没有warning,如 ...

  5. EF配置文件初始化数据库 codefirst

    . using ConsoleApplication42; using System.Data.Entity; using System.Data.Entity.ModelConfiguration. ...

  6. Source Insight: has been changed outside of Source Insight

    has been changed outside of Source Insight 2018年04月26日 09:41:01 linux_c_coding_man 阅读数:247 摘自:https: ...

  7. Perl 学习笔记-输入输出

    1.读取标准输入<STDIN>(行输入操作=> 读取一行直到换行符) chomp($line = <STDIN>); # 读取一行并去掉最后的换行符(不会自动去掉) pr ...

  8. maven添加阿里仓库

    1.修改settings.xml 在maven的settings.xml 文件里配置mirrors的子节点,添加如下mirror <mirror> <id>nexus-aliy ...

  9. eclipse Subversion Native Library Not Available

    参考:http://blog.csdn.net/zp357252539/article/details/44880319 Subversion Native Library Not Available ...

  10. 在java中对数据库进行增删改查

    1.java连接MySql数据库 代码区域: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...