完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>树形动画</title>
<!-- 这里的jquery.js你需要去外部引用 -->
<script src="./jquery.js"></script>
<style type="text/css">
ul li {
list-style: none;
}
li ul {
display: none;
}
.plus {
/* 加号的图片 */
list-style-image: url(img/plus.gif);
}
.minus {
/* 减号的图片 */
list-style-image: url(img/minus.gif);
}
</style>
</head>
<body>
<ul id="zong">
<li class="expand">主题市场
<ul>
<li class="expand">运动派
<ul>
<li>三级菜单a</li>
<li>三级菜单b</li>
<li>三级菜单c</li>
<li>三级菜单d</li>
</ul>
</li>
<li class="expand">有车族
<ul>
<li class="expand">三级
<ul>
<li>四级菜单a</li>
<li>四级菜单b</li>
<li>四级菜单c</li>
</ul>
</li>
<li>三级</li>
<li>三级</li>
<li>三级</li>
</ul>
</li>
<li>生活家</li>
</ul>
</li>
<li class="expand">特色购物
<ul>
<li>淘宝二手</li>
<li>拍卖会</li>
<li>爱逛街</li>
<li>全球购</li>
<li>淘女郎</li>
</ul>
</li>
<li class="expand">优惠促销
<ul>
<li>天天特价</li>
<li>免费试用</li>
<li>清仓</li>
<li>1元起拍</li>
</ul>
</li>
<li class="expand">工具</li>
</ul>
<script>
//要给有ul的li添加一个类名plus，单击时展开收缩切换同时类名切换
$(function () {
$(document).ready(function () {
$("li").has('ul').addClass("plus").click(function (e) {
e.stopPropagation();
if (e.target.children.length) {
$(this).children().slideToggle();
$(this).toggleClass("minus");
}
})
// 点击其他地方收起当前菜单
$(document).click(function (e) {
var target = $(e.target);
if (!target.closest("#zong li").length) {
$("#zong ul").slideUp();
}
});
});
})
</script>
</body>
</html>
效果如下：
