<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. 精益IT组织与分享式领导

    精益IT组织       未来的组织将专注于同行业的产品或业务流--其他的一切,包括专家和管理者在内,都是为了让一线工作人员可以第一时间就做好,而又不会遇到任何麻烦.最大的制约不是技术:真正的挑战是变 ...

  2. [Android] 点击事件的四种写法

    点击事件的必备条件:实现OnClickListener接口,重写onclick(View v)方法 以拨号简单案例为例,如下图效果: 逻辑流程: 获取点击对象,获取数据 给对象设置监听类 实现OnCl ...

  3. 连锁反应confirm

    <script> function del(){ var flag = confirm("你真要删除么?"); if( flag ){ alert("我已被你 ...

  4. 修改别人写的利用AOP实现日志监控的问题

    原文链接 http://blog.csdn.net/jaune161/article/details/51476138 想法 看到原文博主写的这篇文章,我感觉写的很好,可以在我们的项目中使用AOP来监 ...

  5. Unix Shortcuts

    find . -name "*.java" -type f find all the files within a director and its sub-directory e ...

  6. 【css3网页布局】flex盒子模型

    1.0 前言 网页布局(layout)是CSS的一个重点应用. 经典布局类型: 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊 ...

  7. RFID智能感知摄像机推进智慧城市建设步伐

    随着智慧城市建设步伐的大力推进,各地的智慧城市建设取得了卓有成效的成果.物联网工程正在如火如荼地进行,顺应智慧城市物联网的发展大趋势,建设城市级的视频感知网,涉及治安.交通.教育等多方面综合传感应用, ...

  8. Xamarin App文件(apk)大小和启动时间的影响因素

    Xamarin开发的时候大家都有一个疑问,就是apk文件会不会特别的大,启动会不会很慢.答案是肯定的,文件肯定大,启动肯定会慢,但是具体大多少.具体慢多少,有什么因素可以使apk文件稍微小一点.可以使 ...

  9. python之matplotlib绘图基础

    Python之matplotlib基础 matplotlib是Python优秀的数据可视化第三方库 matplotlib库的效果可参考 http://matplotlib.org/gallery.ht ...

  10. Java中的框架基础面试知识

    spring mvc 工作机制(原理): DispatcherServlet主要用作职责调度工作,本身主要用于控制流程 Spring mvc运行原理 1.springmvc将所有的请求都提交给Disp ...