jQuery基础

最新推荐文章于 2025-08-13 22:02:33 发布

ruirui_1996

最新推荐文章于 2025-08-13 22:02:33 发布

阅读量775

点赞数

CC 4.0 BY-SA版权

分类专栏：前端-jQuery 文章标签： jquery ajax css

本文链接：https://blog.youkuaiyun.com/ruirui_1996/article/details/78285277

前端-jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了jQuery的基础概念、常用方法及其应用场景，包括选择器、属性操作、CSS样式处理、事件处理、动画效果及AJAX交互等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery是一个使用原生js来封装常用方法的类库，解决了浏览器兼容问题
jQuery中提供的常用方法：核心、选择器、属性、筛选、CSS、文档处理、事件、效果（动画）、Ajax、工具

1.常用的选择器
 2.常用方法属性操作
    2.1 回调函数
    2.2 常用属性（attr、prop、class、内容）
   2.3 内置遍历机制和手动循环方法
 3.CSS常用方法链式写法文档处理筛选
    3.1 CSS常用方法
    3.2 链式写法
    3.3 文档处理
    3.4 筛选
 4.ajax 事件工具动画
    4.1 ajax
   4.2 事件
    4.3 工具
    4.4 动画
 5.jQuery核心
    5.1 jQuery = $
   5.2 jQuery的扩展
 6.实现选项卡
 7.折叠菜单

1.常用的选择器

通过传递对应规则的内容（ID、标签名、样式类名），获取到页面中指定的元素或元素集合
通过js获取到的结果是属于元素对象或元素集合或节点集合，他们可以使用浏览器为其提供的那些天生自带的属性和方法
通过jQuery选择器获取到的结果是一个jQuery对象，可以使用jQuery中提供的那些属性和方法，但是不能直接的使用浏览器内置的属性和方法

JS原生对象与jQuery相互转换

原生转为jQuery：$(JS原生对象)
jQuery转为原生：直接通过索引获取对应的元素对象或者使用get()方法

get()方法和通过索引获取对应的元素对象是一样的

<div id="div1">
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div></div>
    <div></div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

获取id为div1的div元素，原生js写法为：
var oDiv = document.getElementById("div1");
通过jQuery·获取：
var $oDiv = $("#div1");
把oDiv转为jQuery对象：
$(oDiv)
把$oDiv转为js对象：
$oDiv[0]或者$oDiv.get(0)

$(“选择器”,context)

第二个参数document一般不传，默认是document，也可以指定具体的上下文来获取需要的元素

选择器列表

选择器分类	类型	含义
基本选择器	`#id`	根据给定的ID匹配一个元素
	element	根据给定的元素名匹配所有元素
	.class	根据给定的类匹配元素
	*	匹配所有元素
	selector1,selector2,selectorN	将每一个选择器匹配到的元素合并后一起返回
层次选择器	ancestor descendant	在给定的祖先元素下匹配所有的后代元素
	parent > child	在给定的父元素下匹配所有的子元素
	prev + next	匹配所有紧接在 prev 元素后的 next 元素
	prev ~ siblings	匹配 prev 元素之后的所有 siblings 元素
基本过滤器选择器	:first	获取第一个元素
	:last	获取最后个元素
	:not	去除所有与给定选择器匹配的元素
	:even	匹配所有索引值为偶数的元素，从 0 开始计数
	:odd	匹配所有索引值为奇数的元素，从 0 开始计数
	:eq	匹配一个给定索引值的元素
	:gt	匹配所有大于给定索引值的元素
	:lt	匹配所有小于给定索引值的元素
	:header	匹配如 h1, h2, h3之类的标题元素
	:animated	匹配所有正在执行动画效果的元素
内容过滤器选择器	:contains	匹配包含给定文本的元素
	:empty	匹配所有不包含子元素或者文本的空元素
	:has	匹配含有选择器所匹配的元素的元素
	:parent	匹配含有子元素或者文本的元素
可见性过滤器选择器	:hidden	匹配所有不可见元素，或者type为hidden的元素
	:visible	匹配所有的可见元素
属性过滤器选择器	[attribute]	匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可
	[attribute=value]	匹配给定的属性是某个特定值的元素
	[attribute!=value]	匹配所有不含有指定的属性，或者属性不等于特定值的元素
	[attribute^=value]	匹配给定的属性是以某些值开始的元素
	[attribute$=value]	匹配给定的属性是以某些值结尾的元素
	[attribute*=value]	匹配给定的属性是以包含某些值的元素
	[attrSel1][attrSel2][attrSelN]	复合属性选择器，需要同时满足多个条件时使用
子元素过滤器选择器	:nth-child	匹配其父元素下的第N个子或奇偶元素
	:first-child	匹配第一个子元素
	:last-child	匹配最后一个子元素
	:only-child	如果某个元素是父元素中唯一的子元素，那将会被匹配
表单选择器	:input	匹配所有 input, textarea, select 和 button 元素
	:text	匹配所有的单行文本框
	:password	匹配所有密码框
	:radio	匹配所有单选按钮
	:checkbox	匹配所有复选框
	:submit	匹配所有提交按钮
	:image	匹配所有图像域
	:reset	匹配所有重置按钮
	:button	匹配所有按钮
	:file	匹配所有文件域
	:hidden	匹配所有不可见元素，或者type为hidden的元素
表单过滤器选择器	:enabled	匹配所有可用元素
	:disabled	匹配所有不可用元素
	:checked	匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
	:selected	匹配所有选中的option元素

2.常用方法属性操作

回调函数

callbacks.add(callbacks)

回调列表中添加一个回调或回调的集合

cal.add(callbacks)

回调列表中添加一个回调或回调的集合

callbacks.fired()

用给定的参数调用所有的回调

cal.remove(callbacks)

删除回调或回调回调列表的集合

示例代码：

function fn1(value) {
    console.log("fn1:" + value);
}
function fn2(value) {
    console.log("fn2:" + value);
}
var $call = $.Callbacks(); //创建一个回调函数的列表集合
$call.add(fn1); //向集合中增加一个fn1的函数
$call.fire(100); //把回调函数集合中的方法都执行一遍，并把对应参数传递给对应方法
$call.add(fn2);
$call.fire(200); //fn1:200  fn2:200
$call.remove(fn1); //在回调函数的列表集合中移除fn1方法
$call.fire(200); //fn2:200

代码对应原理示例图：

$(document).ready(function () {});

只要HTML结构加载完成，就会触发对应的行为，而且在一个页面中可以使用多次

$(function () {});

以上两种方式等价，和原生js中window.onload对应
window.onload的意思是：当页面中的HTML结构、图片、文字等所有资源都加载完成才会触发这个行为，并且在一个页面中它只能触发一次，后面写的会把前面覆盖掉

这么写的好处：

所有的HTML都加载完成了
形成了一个闭包

常用属性（attr、prop、class、内容）

attr(name|pro|key,val|fn)

获取和设置元素的自定义属性，等价于原生js中的setAttribute/getAttribute

removeAttr(name)

从每一个匹配的元素中删除一个属性

例如：

<div id="div1">
    <input type="text" value="zzr" />
</div>

给id为div1的元素添加属性：
$("#div1").attr("abc", 123);
给id为div1的元素批量添加属性：

$("#div1").attr({
    index: 1,
    name: "zzr"
});

获取input元素的value属性：
$("input").attr("value")
移除input元素的value属性：
$("input").removeAttr("value");

prop(n|p|k,v|f)

获取在匹配的元素集中的第一个元素的属性值

removeProp(name)

用来删除由.prop()方法设置的属性集

prop和attr是不同的两套方式，两者之间不能相互混用，用attr获取的只能用attr删除或者修改、获取。同理，用prop设置的只能用prop修改或者获取。
prop：内置的属性可以在HTML结构中体现出来，不是内置的不能体现出来，但是可以获取到值。
使用方法与attr一样

两者的区别：
attr一般都是用来设置和操作元素的自定义属性的，而prop一般是用来操作元素的内置属性的，尤其是表单元素的操作，大部分使用prop

addClass(class|fn)

为每个匹配的元素添加指定的类名

removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类

toggleClass(class|fn[,sw])

如果存在（不存在）就删除（添加）一个类

例如：

<div id="div1">
    <input type="text" />
</div>

给id为div1的元素增加样式类名：
$("#div1").addClass("div");
给id为div1的元素移除样式类名：
$("#div1").removeClass("div");
给input元素增加样式类名：
$("input").toggleClass("div");
给input元素移除样式类名（代码同上）：
$("input").toggleClass("div");

html([val|fn])

取得第一个匹配元素的html内容

text([val|fn])

取得所有匹配元素的内容

val([val|fn|arr])

获得匹配元素的当前值

例如：

<body>
<div>
    <div id="div1">
        <span>zzr</span>
        <span></span>
        <span></span>
    </div>
    <input type="text" value="zzr">
</div>
<script type="text/javascript">
    $(function () {
        var $oDiv = $("#div1");
        var $oinput = $("input");
        //获取
        $oDiv.html(); //带标签的三个span元素
        //设置
        $oDiv.html("zzr");
        //获取
        $oDiv.text(); //zzr
        //获取表单中的value属性：
        console.log($oinput.val()); //zzr
        //设置表单中的value属性：
        $oinput.val("123");
    });
</script>
</body>

内置遍历机制和手动循环方法

内置循环

通过jQuery选择器获取到的集合，然后让集合直接的调用jQuery中提供的方法，相当于给集合中的每一个元素都调用了该方法，叫做jQuery的内置循环操作

each(callback)

循环，类似于forEach，以每一个匹配的元素作为上下文来执行一个函数

例如：

<div id="div1">
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div></div>
    <div></div>
</div>

为id为div1下的所有div元素设置class属性：

$("#div1>div").each(function (index, item) {
    $(this).addClass("w1");
    //this是当前遍历的这一项内容，即item
})

与forEach不同的是，回调函数的两个参数相反

3.CSS常用方法链式写法文档处理筛选

CSS常用方法

css(name|pro|[,val|fn])

获取或者设置当前元素的样式值

例如：

var $box = $("#div1");
//获取：
$box.css("width"); //1018.4px
//单个设置：
$box.css("background", "red");
//批量设置：
$box.css({
    background: "red",
    opacity: 0.5
});

offset([coordinates])

不管父级参照物是谁，获取当前元素距离body的偏移距离，包含top和left

position()

获取当前元素距离父级参照物的偏移，包含top和left

例如：

var $box = $("#div1");
$box.offset(); //{top: 8, left: 8}
$box.position(); ////{top: 8, left: 8}

scrollTop([val])

获取匹配元素相对滚动条顶部的偏移

scrollLeft([val])

获取匹配元素相对滚动条左侧的偏移

既可以获取，也可以设置（传值是设置，不传是获取）

height([val|fn])

获取或者设置元素的height值

width([val|fn])

获取或者设置元素的width值

innerHeight()

获取第一个匹配元素内部区域高度（包括补白、不包括边框）
等价于clientHeight

innerWidth()

获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
等价于clientWidth

outerHeight([options])

获取第一个匹配元素外部高度（默认包括补白和边框）
options设置为 true 时，计算边距在内

outerWidth([options])

获取第一个匹配元素外部宽度（默认包括补白和边框）
options设置为 true 时，计算边距在内

例如：
css样式：

* {
    margin: 0;
    padding: 0;
}

通过css方法设置样式：

var $box = $("#div1");
$box.css({
    width: "200px",
    height: "200px",
    border: "10px solid #000",
    padding: "30px",
    margin: "50px"
});

//获取
$box.width(); //200
$box.height(); //200
//设置
$box.width(300);
//获取
$box.innerWidth(); //360
$box.innerHeight(); //260
$box.outerWidth(); //380
$box.outerHeight(); //280
$box.outerWidth(true); //480
$box.outerHeight(true); //380

链式写法

jQuery非常强大的地方在于它的链式写法
链式写法的原理：执行完一个方法后返回的结果依然是一个jQuery对象，这样就可以继续调用下一个方法执行了

文档处理

append(content|fn)

向每个匹配的元素内部追加内容
语法是：容器.append(元素)

向id是div1中添加id是div2的元素：

<body>
<div>
    <div id="div1">
        <span>zzr</span>
        <span></span>
        <span></span>
    </div>
</div>
<script type="text/javascript">
    var oDiv = document.createElement("div1");
    oDiv.id = "div2";
    $(function () {
        var $box = $("#div1");
        $box.append($(oDiv));
    });
</script>
</body>

appendTo(content)

把所有匹配的元素追加到另一个指定的元素元素集合中
语法是：元素.appendTo(容器)

上面的例子也可以写成：

<body>
<div>
    <div id="div1">
        <span>zzr</span>
        <span></span>
        <span></span>
    </div>
</div>
<script type="text/javascript">
    var oDiv = document.createElement("div1");
    oDiv.id = "div2";
    $(function () {
        var $box = $("#div1");
        $(oDiv).appendTo($box);
    });
</script>
</body>

prepend(content)

向每个匹配的元素内部前置内容

prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中

after(content|fn)

在每个匹配的元素之后插入内容

before(content|fn)

在每个匹配的元素之前插入内容

insertAfter(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的后面

insertBefore(content)

把所有匹配的元素插入到另一个、指定的元素元素集合的前面

把id是div2的元素插入到id是div1的前面，和$box是同级的：

<body>
<div>
    <div id="div1">
        <span>zzr</span>
        <span></span>
        <span></span>
    </div>
</div>
<script type="text/javascript">
    var oDiv = document.createElement("div1");
    oDiv.id = "div2";
    $(function () {
        $(oDiv).insertBefore($("#div1"));
    });
</script>
</body>

replaceAll(selector)

用匹配的元素替换掉所有 selector匹配到的元素

把所有的span标签替换成ul标签

<div>
    <div id="div1">
        <span>zzr</span>
        <span></span>
        <span></span>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("<ul></ul>").replaceAll($("span"));
    });
</script>
</body>

empty()

删除匹配的元素集合中所有的子节点

remove([expr])

从DOM中删除所有匹配的元素

detach([expr])

从DOM中删除所有匹配的元素

clone([Even[,deepEven]])

克隆匹配的DOM元素并且选中这些克隆的副本

筛选

eq(index|-index)

获取当前链式操作中第N个jQuery对象

first()

获取第一个元素

last()

获取最后个元素

hasClass(class)

检查当前的元素是否含有某个特定的类，如果有，则返回true

匹配所有div标签中class是w1的元素
$("div").hasClass("w1");

filter(expr|obj|ele|fn)

同级过滤，筛选出与指定表达式匹配的元素集合
首先通过选择器获取一个集合，在获取的内容中进行二次筛选

children([expr])

子集过滤，取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合

find(expr|obj|ele)

后代过滤，搜索所有与指定表达式匹配的元素

这三个都是常用的筛选、遍历的作用

$("div").children(); //获取div下的所有子集元素
$("div").children(".w1");//获取div下的所有class是w1的子集元素
$("div").children("#div1,#div2");//获取div下的所有id是div1和div2的子集元素
$("div").children("[name = 'zzr']");//获取div下的自定义属性是zzr的子集元素

$("div").find();//一个空集合
$("div").find("div"); //获取div下的所有后代元素

$("div").filter();//一个空集合

$oDiv = $("#div1");
console.log($("*", $oDiv).filter("span"));
//id是div1下的所有元素中，获取所有的span元素

is(expr|obj|ele|fn)

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true

map(callback)

将一组元素转换成其他数组（不论是否是元素数组）

$(function () {
    var $ary = $("div").map(function () {
        return $(this).attr("id");
    });
    console.log($ary); //["div1", "div2", "div3", "div4"]
});

parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合

parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）

next([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

nextAll([expr])

查找当前元素之后所有的同辈元素

siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

prevAll([expr])

查找当前元素之前所有的同辈元素

4.ajax 事件工具动画

ajax

$.ajax(url,[settings])

$.ajax({
    url: "json/text.txt?_=" + Math.random(),
    type: "get",
    dataType: "json", //text、html、jsonp
    success: function (data) {
        console.log(data);
    }
});

事件

<script type="text/javascript">
    $(function () {
        var $box = $("#div1");
        $box.on("click", function () {
            console.log(1); //this是当前元素，但是是js原生对象，需要$(this)
        });
        $box.on("click", function () {
            console.log(2);
        });
        $box.on("mouseover", function () {
            console.log(3);
        });
        $box.on("mouseout", function () {
            console.log(4);
        });
    });
</script>

jQuery中除了bind、unbind、on、off、click、mouseover…这些绑定的方式外，还提供了一种delegate

工具

$.each(object,[callback])

通用例遍方法，可用于例遍对象和数组

jQuery中有两个each：
一个是$("div").each(function(index,item){console.log(item);})
意思是对div的内部元素进行遍历，循环选择器获取到的jQuery集合中的结果
另一个是$.each([12,23,34],function(index,item){console.log(item);})
作用：循环数组、类数组、对象中的每一项

$.makearray(obj)

将类数组对象转换为数组对象

$.map(arr|obj,callback)

将一个数组中的元素转换到另一个数组中
也有两个map，和each原理一样，只是可以支持返回值

$.uniqueSort(array)

通过搜索的数组对象，排序数组，并移除任何重复的节点

$.parseXML(data)

解析一个字符串到一个XML文件

$.isNumeric(value)

确定它的参数是否是一个数字

$.isWindow(obj)

测试对象是否是窗口（有可能是Frame）

$.isPlainObject(obj)

测试对象是否是纯粹的对象（通过 “{}” 或者 “new Object” 创建的）

$.isEmptyObject(obj)

测试对象是否是空对象（不包含任何属性）

$.isFunction(obj)

测试对象是否为函数

$.trim(str)

去掉字符串起始和结尾的空格

动画

animate(params,[speed],[easing],[fn])

用于创建自定义动画的函数
$("box").animate({left:xxx,top:xxx,...},duration,"linear/swing",function(){});

stop([clearQueue],[jumpToEnd])

结束之前正在运行的动画，开启下一个新的动画

delay(duration,[queueName])

设置一个延时来推迟执行队列中之后的项目

finish( [queue ] )

停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

stop和finish的区别
- stop的意思是结束上一个动画，下一个动画是紧接着当前位置开始运动的
- finish的意思是结束上一个动画，并且让元素快速的到达目标位置，然后再开始下一个动画

fadeIn([speed],[easing],[fn])

淡入

fadeOut([speed],[easing],[fn])

淡出

fadeToggle([speed,[easing],[fn]])

淡入和淡出

show([speed,[easing],[fn]])

显示隐藏的匹配元素

hide([speed,[easing],[fn]])

隐藏显示的元素

toggle([speed],[easing],[fn])

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

slideDown([speed],[easing],[fn])

通过高度变化（向下增大）来动态地显示所有匹配的元素

slideUp([speed,[easing],[fn]])

通过高度变化（向上减小）来动态地隐藏所有匹配的元素

slideToggle([speed],[easing],[fn])

实例：
html代码：

<body>
<input id="submit" type="button" value="操作"/>
<div id="box">
</div>

css代码：

* {
    margin: 0;
    padding: 0;
}

#box {
    height: 300px;
    width: 200px;
    background-color: #5bc0de;
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -100px;
    opacity: 1;
    filter: alpha(opacity=100);
}

input {
    width: 200px;
    height: 35px;
    border: 1px solid green;
    margin: 5px auto;
    display: block;
    cursor: pointer;
}

js代码：

$(function () {
    var $submit = $("#submit"), $box = $("#box");
    $submit.on("click", function () {
        $box.stop().hide(); //隐藏
        $box.stop().hide(500); //隐藏时间为500毫秒
        $box.stop().hide("fast"); //快速隐藏
        $box.stop().hide("slow"); //慢速隐藏

        $box.stop().slideToggle(500); //收起-展开-收起......

        $box.stop().slideUp(500); //收起时间为500毫秒

        $box.stop().fadeOut(500); //淡出时间为500毫秒

        $box.stop().delay(500).slideToggle(500); //延迟500毫秒后...

        $box.finish().slideToggle(500); //延迟500毫秒后...

        $box.stop().animate({
            width: 20,
            height: 30,
            opacity: 0.5
        }, 1000);

        //先匀加速再匀减速
        $box.stop().animate({
            top: 600
        }, 5000, "swing");

        //运动后变成黑色
        $box.stop().animate({
            top: 600
        }, 5000, function () {
            $(this).css("background", "#000");
        });
    });
});

5.jQuery核心

jQuery = $

//jQuery源码：
if ( !noGlobal ) {
    window.jQuery = window.$ = jQuery;
}

jQuery就是闭包中的私有函数

//jQuery源码：
var jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context );
};

所以可以支持两个参数，第一个selector是选择器，第二个是上下文。

两个参数：

selector支持三种类型，一是string选择器类型，二是object，js原生对象，意思是把原生对象转化为jQuery对象，三是function类型，当页面加载完成后执行代码，是一个回调函数，等价于$(document).ready;的操作。
context，不传默认为document，传递的是一个原生js对象，能够修改其上下文，如果是jQuery对象，会默认把其重构为对应的选择器

关于这个函数的返回值：

//jQuery源码：
jQuery.fn = jQuery.prototype = {
    ...
    constructor: jQuery,
    ...
};

可以把这个理解为返回的是jQuery原型上init上的实例，简单理解为jQuery类的实例。也就是说当在外部执行$();或者jQuery();时，返回的是jQuery类的实例。

jQuery选择器：创建jQuery这个类的一个实例（jQuery对象）

例如：

$("box") === $("box");  //false

在jQuery这个类的原型上定义了很多属性和方法，而通过选择器获取的每一个实例都可以调用这些方法：属性、CSS、文档、筛选、动画、事件….使用这些方法：$("*").css();即先创建一个实例，再调用这个方法执行。

jQuery的扩展

//jQuery源码：
jQuery.extend = jQuery.fn.extend = function() {

jQuery.extend表示把jQuery当成一个普通对象，在其对象上增加一个叫extend的方法
jQuery.fn.extend表示在它的原型上也增加了extend的方法

把jQuery当做一个普通的对象在它自己的属性上增加了一些常用的方法，如ajax、工具…

所以jQuery的方法分为两种：定义在原型上和属性上

extend是向jQuery这个类库中增加一些其他常用的方法：
1.向jQuery属性名上扩展（把jQuery当成一个对象），如扩展一个aa方法：

jQuery.extend({
    aa: function () {
        console.log("aa");
    }
});
//执行
$.aa();

作用是完善类库，给类库增加一些核心的方法
2.向jQuery原型上扩展（把jQuery当成一个类），如扩展一个bb方法：

jQuery.fn.extend({
    bb: function () {
        console.log("bb");
    }
});
$().bb();

作用是编写一些基于jQuery的插件

6.实现选项卡

7.折叠菜单

效果图：
这里写图片描述

HTML代码：

<div class="menu">
    <ul>
        <li>
            <h2>衬衫1</h2>
            <ul class="menuList" style="display: block;">
                <li>短袖衬衫</li>
                <li>长袖衬衫</li>
                <li>男款衬衫</li>
                <li>女款衬衫</li>
            </ul>
        </li>
        <li>
            <h2>衬衫2</h2>
            <ul class="menuList">
                <li>短袖衬衫</li>
                <li>长袖衬衫</li>
                <li>男款衬衫</li>
                <li>女款衬衫</li>
            </ul>
        </li>
        <li>
            <h2>衬衫3</h2>
            <ul class="menuList">
                <li>短袖衬衫</li>
                <li>长袖衬衫</li>
                <li>男款衬衫</li>
                <li>女款衬衫</li>
            </ul>
        </li>
    </ul>
</div>

CSS代码：

.menu {
    margin: 20px auto 0 auto;
    width: 200px;
    border: 1px solid #5bc0de;
    background-color: #eee;
}

.menuList {
    display: none;
}

* {
    font-size: 15px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
    cursor: pointer;
}

h2 {
    width: 198px;
    background-color: #ddd;
    padding: 5px 0 5px 0;
    border: 1px solid #ccc;
}

li {
    text-align: center;
}

.menuList li {
    padding: 5px 0 5px 0;
    border-bottom: 1px solid #ccc;
}

js代码（jQuery）：

$(function () {
    $(".menu h2").on("click", function () {
        $(this).next().stop().slideToggle(500).parent().siblings().children("ul").slideUp(500);
    });
});