当前位置: 代码迷 >> Web前端 >> 抽缩菜单
  详细解决方案

抽缩菜单

热度:303   发布时间:2013-09-08 15:21:21.0
收缩菜单
<style type="text/css">
a{text-decoration:none;}
li{list-style-type:none;}
</style>

<script type="text/javascript" src="../jquery-1.7.2.js"></script>

<script type="text/javascript">
$(function(){
	$('.level1 > a').click(function(){
		$(this).addClass('current')
			.next().show()
			.parent().siblings().children('a').removeClass('current')
			.next().hide();
	});

});
</script>

<div>
	<ul class="menu">
		<li class="level1">
			<a href="#">手机</a>
			<ul class="level2">
				<li><a href="#">智能手机</a></li>
				<li><a href="#">音乐手机</a></li>
				<li><a href="#">拍照手机</a></li>
			</uL>
		</li>
		<li class="level1">
			<a href="#">电脑</a>
			<ul class="level2">
				<li><a href="#">平板</a></li>
				<li><a href="#">笔记本</a></li>
				<li><a href="#">超级本</a></li>
			</uL>
		</li>
		<li class="level1">
			<a href="#">编程语言</a>
			<ul class="level2">
				<li><a href="#">php</a></li>
				<li><a href="#">java</a></li>
				<li><a href="#">.net</a></li>
			</uL>
		</li>		
	</ul>

</div>

?

  相关解决方案