利用vs新建一个空白web项目，

再用nuget安装jQuery 1.x最新版，目前是 jQuery 1.12.4

新建一个html页面

再将jquery.js拖进新建的页面的头部

最后的html页面代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <meta charset="utf-8"/>

    <style>

        .current {

            background-color: red;

        }

    </style>

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

</head>

<body>

    <h1>功能：导航</h1>

<p>

    描述：点击分类展开子类，同时收起其它分类，并高亮当前点击的分类

</p>

<div class="box">

    <ul class="menu">

        <li class="level1" id="第一个分类的li">

            <a href="#none">衬衫</a>

            <ul class="level2" id="第一个分类的子类ul">

                <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" id="第二个分类li">

            <a href="#none">卫衣</a>

            <ul class="level2" id="第二个分类的子类ul">

                <li><a href="#none">开襟卫衣</a></li>

                <li><a href="#none">套头卫衣</a></li>

                <li><a href="#none">运动卫衣</a></li>

                <li><a href="#none">童装卫衣</a></li>

            </ul>

        </li>

        <li class="level1" id="第三个分类的li">

            <a href="#none">裤子</a>

            <ul class="level2" id="第三个分类的子类ul">

                <li><a href="#none">短裤</a></li>

                <li><a href="#none">休闲裤</a></li>

                <li><a href="#none">牛仔裤</a></li>

                <li><a href="#none">免烫卡其裤</a></li>

            </ul>

        </li>

    </ul>

</div>

<script>

    //在这里写js代码

    $(".level1>a").click(function() {

        $(this).addClass("current") //给被点击的对象(a)加个样式

            .next()                 //a下面的ul

            .show()                 //把ul显示出来

            .parent()               //得到level1 第一个li

            .siblings()             //得到level1 的地2个和第三个li

            .children("a")          // 第二个和第三个li下的a，就是卫衣&裤子

            .removeClass("current") //移除它们的选中样式

            .next()                 // 得到level1 下的第二个和第三个ul

            .hide();                // 隐藏他们

    });

</script>

</body>

</html>

　　

jQuery链式选择器方法-导航的更多相关文章

  1. jQuery链式操作

    讨论jQuery的文章很多.然而,关于jQuery的链式操作的文章并无多少.好的代码会带来速度的提升.快速渲染和响应意味着更好的用户体验. 下面就来讲讲jQuery的链式操作. 很多时候我们写代码的时 ...

  2. JQUERY链式操作实例分析

    本文实例讲述了jQuery链式操作.分享给大家供大家参考,具体如下: 从过去的实例中,我们知道jQuery语句可以链接在一起,这不仅可以缩短代码长度,而且很多时候可以实现特殊的效果. <scri ...

  3. jQuery链式语法演示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. iOS利用block实现链式编程方法（Objective-C链式编程）

    objc利用block实现链式编程方法 因为不好读.block和其他语言的匿名函数一样,很多程序员刚开始很难主动去用他. 本文描述block作为属性的实际使用,看懂block,并讲解如何利用block ...

  5. jQuery链式操作[转]

    用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...

  6. 模拟jquery链式访问

    一直写代码写代码,博客都快荒废了,眼看一月要过完,不能不留下点记忆,嘿嘿,刚研究了下jquery的链式访问,这么好用的技能我赶紧get了下,研究后略微修改,模拟一个简单的链式访问,下面这段代码支持修改 ...

  7. jQuery链式操作如何返回上一级DOM

    有时候我们在链式操作的时候,选择到了其他的DOM进行操作,如何再返回先前的dom呢,有一下几个方法,end(); addBack(); add(); 使用形式 $("#divFather&q ...

  8. Jquery链式编程及Index()详解

    Jquery中的方法基本 上都可以返回一个Jquery对象, 如: <body> <div class="divcontent"> <p>中国& ...

  9. jQuery——链式编程与隐式迭代

    链式编程 1.原理:return this; 2.通常情况下,只有设置操作才能把链式编程延续下去.因为获取操作的时候,会返回获取到的相应的值,无法返回 this. 3.end():结束当前链最近的一次 ...

随机推荐

  1. c++ stl源码剖析学习笔记(三)容器 vector

    stl中容器有很多种 最简单的应该算是vector 一个空间连续的数组 他的构造函数有多个 以其中 template<typename T> vector(size_type n,cons ...

  2. 搭建django

    虚拟环境配置 pip install virtualenv 一般需要安装一个管理工具:pip install virtualenvwrapper-win 只有它可以使用workon 创建虚拟环境:mk ...

  3. 20155326刘美岑 《网络对抗》Exp1 PC平台逆向破解

    20155326刘美岑 <网络对抗>逆向及Bof基础实践 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函 ...

  4. java基础-三元运算符

    1.三元运算符的格式 /* 三元运算符 (条件表达式)?表达式1:表达式2; 如果条件为true,整个表达式结果是表达式1: 如果条件为false,整个表达式结果是表达式2: 注意:三元运算符不能单独 ...

  5. （转载）Linux之虚拟机 rehl7的ip

    RHEL7最小化安装之后(桥接模式),我们查看本机IP, ip addr 我们要修改配置文件 找到目录 找到文件(每个人的ifcfg-eno16777736都不同),用vi编辑器打开修改配置文件 保存 ...

  6. Navicat for MYSQL 数据库手动同步方法

    Navicat for MYSQL 数据库手动同步方法     数据库同步有两种类型,一是结构同步,一般是数据库表增删,或是表中字段的增删:二是数据同步,即是表里面的记录的增删. 现假设我要让本地数据 ...

  7. ETL概念详解

    ETL是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,目的是将企业中的分散.零乱.标准不统一的数据整合到一起,为企业的决策提供分析依据. ETL是BI项目重要的一个环节. 通常情况下,在 ...

  8. 2.html基础标签:无序+有序+自定义列表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. es2017新特性

    2017年6月底es2017不期而至; 截止目前es8是ecmascript规范的第九个版本:自es2015开始ECMA协会将每年发布一个版本并将年号作为版本号:算了 直接看下es2017的新特性: ...

  10. 如何正确的使用Ubuntu以及安装常用的渗透工具集.

    文章来源i春秋 入坑Ubuntu半年多了  记得一开始学的时候基本一星期重装三四次=-= 尴尬了 觉得自己差不多可以的时候 就吧Windows10干掉了 c盘装Ubuntu 专心学习.   这里主要来 ...