伸缩菜单+二级下拉菜单

在做web开发的时候。前端人员经常会遇到做伸缩菜单的事情，已经做了5个前端页面的我，几乎要用烂了，所以分享出来。关于其中的上拉下拉（左拉又拉）图标箭头的变化，都是在JS里设置样式的。贴出详细代码：

<div id="content">
	<div class="left">
		<ul>
			
	<li>
		<a href="<%=base%>/main" title="样例>
			样例
			<span></span>
		</a>
	</li>

	</ul>
<div class="slid">
	<div class="jieru">
		<a href="javascript:;" title="111">
			111
			<span></span>
		</a>
		<ul>
			<li class="li_bg_one_a">
				<a href="javascript:;" οnclick="loadPage('csgl/csglxx')">101</a>
			</li>
			<li class="li_bg_one_b"><a href="javascript:;" οnclick="loadPage('csgl/sgsj')">102</a></li>
		</ul>
	</div>
	<!-- 这是带二级菜单的样式 -->
	<div class="jieru">
		<a href="javascript:;" title="222">
			222
			<span></span>
		</a>
		<ul>
			<li class="li_bg_two_a">
				<a href="javascript:;" οnclick="loadPage('gsgl/gsglxx')">201</a>
			</li>
			<li class="li_bg_one_b"><a href="javascript:;" οnclick="loadPage('gsgl/sgsj')">202</a></li>
		</ul>
	</div>
</div>
<div class="but">
	<!-- 这是收缩按钮什么都不需要添加 -->
	</div>
</div>
</div>

Javascript代码：

$(function(){
	$(".jieru>a").click(function() {
		$(this).next().slideToggle();
		$(this).parent().siblings().find("ul").slideUp();
	});
	$(".nav>ul>li").click(function() {
		$(this).addClass('bg');
		$(this).find('div').css({
			display: 'block'
		});
		$(this).siblings().removeClass('bg');
		$(this).siblings().find('div').css({
			display: 'none'
		});
	});
	var i=1;
	$(".but").click(function() {
		if (i==1) {
			$('#content .left').css('width','3%');
			$('#content .right').css('width','97%');
			$('.jieru>a').css("textIndent","-9999px");
			$('.jieru>ul>li>a').css("textIndent","-9999px");
			$('#content .left>ul>li>a').css("textIndent","-9999px");
			$('.jieru>a>span').css("display","none");
			$('#content .left>ul>li>a span').css("display","none");
			$(this).addClass('butbg')
			i=2;
		}else if (i==2) {
			$('#content .left').css('width','18%');
			$('#content .right').css('width','82%');
			$('.jieru>a').css("textIndent","40px");
			$('.jieru>ul>li>a').css("textIndent","50px");
			$('#content .left>ul>li>a').css("textIndent","40px");
			$('.jieru>a>span').css("display","inline-block");
			$('#content .left>ul>li>a span').css("display","inline-block");
			$(this).removeClass('butbg')
			i=1;
		};
	});
//同理，下面的是上下伸缩菜单的JS，此处可以注释
	var j = 1;
	$('.news_button').click(function() {
		if (j==1) 
		{
			$(this).find('.ck_but').addClass('ck_but_bg');
			$(this).prev('.news_warp').slideUp();
			j=2;
		}else if (j==2) 
		{
			$(this).find('.ck_but').removeClass('ck_but_bg');
			$(this).prev('.news_warp').slideDown();
			j=1;
		};
	});
	var k = 1;
	$('.table_but_warp').click(function() {
		if (k==1) {
			$(this).find('.table_but').addClass('bg_pos');
			$(".table").animate({right:"-100%"});

			k=2;
		}else if (k==2) {
			$(this).find('.table_but').removeClass('bg_pos');
			$(".table").animate({right:"0"});
			k=1;
		};
	});
});

CSS样式代码如下：

.jieru:nth-child(1)>a {
}
.jieru:nth-child(1)>a {
    background: url(../images/twonav_1_1.png)no-repeat 8px 10px;
}

.but {
    position: absolute;
    bottom: 1%;
    right: 5%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: url(../images/icon.png)no-repeat -400px -5px;
}

.butbg {
    background: url(../images/icon.png)no-repeat -450px -5px;
}

可以放到代码中直接使用的，不过样式在JS里设定倒不是很好。