<div class="box">
  <ul class="menu">
    <li class="level1">
      <a href="#none">衬衫</a>
       <ul class="level2">
        <li><a href="#none">短袖衬衫</a></li>
        <li><a href="#none">长袖衬衫</a></li>
        <li><a href="#none">短袖T血</a></li>
        <li><a href="#none">长袖T血</a></li>
      </ul>
    </li>
    <li class="level1">
      <a href="#none">卫衣</a>
      <ul class="level2">
        <li><a href="#none">卫衣1</a></li>
        <li><a href="#none">卫衣2</a></li>
        <li><a href="#none">卫衣3</a></li>
        <li><a href="#none">卫衣4</a></li>
      </ul>
    </li>
    <li class="level1">
      <a href="#none">裤子</a>
      <ul class="level2">
        <li><a href="#none">裤子1</a></li>
        <li><a href="#none">裤子2</a></li>
        <li><a href="#none">裤子3</a></li>
        <li><a href="#none">裤子4</a></li>
      </ul>
    </li>
  </ul>
</div>

<script>
$(".level1>a").click(function(){
  $(this).addClass("current")
    .next().show()
    .parent().siblings().children("a").removeClass("current")
    .next().hide();
    return false;
});
</script>

<!--
作者:1543177490@qq.com
时间:2017-07-02
描述:(1)对于同一个对象不超过3个操作的,可写成一行,
如:$("li").show().unbind("click");
(2)对于同一对象的较多操作,建议每行写一个
如:$(this).removeClass("mouse")
.addClass("cat")
.stop()
.fadeTo("fast",0.6)
.fadeTo("fast",1)
.unbind("click")
.click(function(){
//to do
});
(3)对多个对象少数操作,可以每个对象写一行,如果有子元素,可以缩进
如:$(this).removeClass("mouse")
.addClass("cat")
.childer("li").show().end()
.siblings().removeClass("over")
.childer().hide();
-->

js代码风格之链式结构的更多相关文章

  1. 大神的JS代码风格指南

    js代码风格指南:1.缩进使用空格,不要用制表符2.必须用分号3.暂时不用ES6(modules)例如export和import命令4.不鼓励(不禁止)水平对齐5.少用var 都应该使用const或者 ...

  2. Google HTML/CSS/JS代码风格指南

    JS版本参见:http://www.zhangxinxu.com/wordpress/2012/07/google-html-css-javascript-style-guides/ HTML/CSS ...

  3. JS代码风格自动规整工具Prettier

    问题背景 通常使用 ESLint做代码风格检查检查, 和部分代码质量检查. 但是使用ESLint在入库时候, 会产生很多的代码修正工作, 需要开发者一个一个的修改. 如果很多,并且时间紧迫,甚是尴尬. ...

  4. JS代码风格指南

    一.基本格式 缩进 建议每级4个空格,可以给编辑器设置tab = 4个空格,自动转换 分号 不要省略分号,防止ASI(自动插入分号)错误 行宽 每行代码不超过80个字符,过长应该用操作符手动断行 断行 ...

  5. JavaScript之链式结构序列化

    一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } swi ...

  6. js 代码风格(2)

    Properties    • 当访问属性的时候,我们使用点(.)操作符. var luke = { jedi: true, age: 28 }; // bad var isJedi = luke[' ...

  7. JavaScript之链式结构序列化1

    一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } swi ...

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

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

  9. 【好玩】将js代码转为日式表情

    直接上网址:http://utf-8.jp/public/aaencode.html?src=hello 试试将下面代码执行一下吧: ゚ω゚ノ= /`m´)ノ ~┻━┻ //*´∇`*/ ['_']; ...

随机推荐

  1. 让人恼火的经历——手机H5网页被注入广告

    你的网站是否在尾部出现了让人恼火的广告? 这次我算是遇到了这些流氓的广告.那么就让我们一步步攻克这些恼火的广告吧. 问题描述 某一天下午开始,我们制作的网站就开始被各种广告注入,类似上图这种. 还有在 ...

  2. Hibernate 核心接口和工作机制

    主要内容 Configuration类 sessionFactory接口 session接口 Transaction接口 Query 和 criteria接口 1.Configuration类 负责管 ...

  3. mongodb新手扫盲

    前言 数据库基本命令 集合(表)命令 增加数据 删除数据 更新数据 查询数据 mongoose的使用 前言 mongodb是什么?, 需fq 如何安装mongodb? 数据库基本命令 显示所有数据库: ...

  4. Java基础知识二次学习--第三章 面向对象

    第三章 面向对象   时间:2017年4月24日17:51:37~2017年4月25日13:52:34 章节:03章_01节 03章_02节 视频长度:30:11 + 21:44 内容:面向对象设计思 ...

  5. 根据源码用HttpServletRequest获取MultipartFile的问题

    问题 由于某些原因,现在需要这样的一个文件上传接口,这个接口type(String)是必传参数,photoFile(MultipartFile)是非必传参数,即一般情况下需要接受两个参数,分别为pho ...

  6. python 获取utc时间转化为本地时间

    import datetime timenow = (datetime.datetime.utcnow() + datetime.timedelta(hours=8)) timetext = time ...

  7. centos nginx-1.10.3 安装

    wget http://nginx.org/download/nginx-1.13.1.tar.gz nginx 依赖 pcre 库,要先安装pcre,因为nginx 要在rewrite 要解析正则表 ...

  8. 免费在线生成彩色带logo的个性二维码

          码工具网站提供免费的在线二维码生成服务,可以把网址.文本.电子邮件.短信.电话号码.电子名片.wifi网络等信息生成对应的二维码图片.你可以设置二维码图片的格式(png,jpg,gif). ...

  9. Mac 多个JDK的版本 脚本切换

    这里配置jdk7和jdk8版本的切换 1.官网下载jdk7和jdk8 地址:http://www.oracle.com/technetwork/java/javase/downloads 2.安装两个 ...

  10. 玩转nodeJS系列:使用cluster创建nodejs单机多核集群(多进程)

    前言: nodejs提供了cluster集群(支持端口共享的多进程),cluster基于child_process,process二次封装,方便我们使用该功能实现单机nodejs的web集群. 1.c ...