伸缩菜单+二级下拉菜单

来源：互联网发布：直播教学软件编辑：程序博客网时间：2024/04/20 12:55

在做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="城市公路">城市公路<span></span></a><ul><li class="li_bg_one_a"><a href="javascript:;" onclick="loadPage('csgl/csglxx')">城市公路信息查询</a></li><li class="li_bg_one_b"><a href="javascript:;" onclick="loadPage('csgl/sgsj')">事故事件查询</a></li></ul></div><!-- 这是带二级菜单的样式 --><div class="jieru"><a href="javascript:;" title="高速公路">高速公路<span></span></a><ul><li class="li_bg_two_a"><a href="javascript:;" onclick="loadPage('gsgl/gsglxx')">高速公路信息查询</a></li><li class="li_bg_one_b"><a href="javascript:;" onclick="loadPage('gsgl/sgsj')">事故事件查询</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里设定倒不是很好。

1 0