jQuery实现原生树形动画

通过jQuery实现简单的原生树形动画

1、文件头部引入jQuery

<script src="js/jquery-1.11.0.js"></script>

2、样式代码

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);
}

3、html代码

<ul>
	<li>主题市场
		<ul>
			<li>运动派
				<ul>
					<li>三级菜单a</li>
					<li>三级菜单b</li>
					<li>三级菜单c</li>
					<li>三级菜单d</li>
				</ul>
			</li>
			<li>有车族
				<ul>
					<li>三级
						<ul>
							<li>四级</li>
							<li>四级</li>
							<li>四级</li>
						</ul>
					</li>
					<li>三级</li>
					<li>三级</li>
					<li>三级</li>
				</ul>
			</li>
			<li>生活家</li>
		</ul>
	</li>
	<li>特色购物
		<ul>
			<li>淘宝二手</li>
			<li>拍卖会</li>
			<li>爱逛街</li>
			<li>全球购</li>
			<li>淘女郎</li>
		</ul>
	</li>
	<li>优惠促销
		<ul>
			<li>天天特价</li>
			<li>免费试用</li>
			<li>清仓</li>
			<li>1元起拍</li>
		</ul>
	</li>
	<li>工具</li>
</ul>

4、js代码块

$(function(){
		$("li:has(ul)").addClass("plus").click(function(e){
		e.stopPropagation();
		$(this).children().slideToggle();
		$(this).toggleClass("minus");
	});
})