伸缩菜单+二级下拉菜单

<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:;" onclick="loadPage('csgl/csglxx')">101</a>
</li>
<li class="li_bg_one_b"><a href="javascript:;" onclick="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:;" onclick="loadPage('gsgl/gsglxx')">201</a>
</li>
<li class="li_bg_one_b"><a href="javascript:;" onclick="loadPage('gsgl/sgsj')">202</a></li>
</ul>
</div>
</div>
<div class="but">
<!-- 这是收缩按钮什么都不需要添加 -->
</div>
</div>
</div>

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

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