IT技术互动交流平台

jQuery模拟select下拉显隐菜单

发布日期:2013-01-20 21:28:57

到年底了,项目吃紧,WEB前端这块需要做不少,一会需要写个js特效,一会哪边浏览器兼容有问题,主要是坑爹的IE6,再又一会又是新的版本需要上线。
select给咱前端开发们带来无尽的烦恼,就最比较有名的IE6下select挡住这个,就够你折腾一阵了。
下面分享一个jQuery模拟select下拉显隐菜单,这样远离了select问题少好多。

部分代码javascript代码


<script type="text/javascript">
$(document).ready(function(){
	$("#jqueryClick").click(function(){
        var $showcon=$(".jqueryCon");
        $("#jqueryCon").slideToggle('slow',function(){
		if(!$(this).is(":hidden")){
			$(".j1").jqueryba();
			$(".j2").jqueryba();
			$(".j3").jqueryba();
			$(".j4").jqueryba();
			$(".j5").jqueryba();
			$(".j6").jqueryba();
			$(".j7").jqueryba();
			$(".jqueryClick").text("隐藏信息");
		}else{
			$(".jqueryClick").text("显示信息");
			}				
		});        
    });
 
})
</script>

css部分代码


*{margin:0;padding:0}
        body{margin:0 auto}
        ul,li{list-style: none}
        .box{width:1327px;margin:0 auto;}
        .jqueryMenu{width:100%;height:32px;background:url("images/menuBg.png") no-repeat;float:left;line-height:32px;}
            .jqueryMenu li{width:170px;float:left;display:inline;height:32px;text-indent:1em}
        .jqueryCon{width:1323px;height:100px;float:left;border-left:2px #d4c0a2 solid;border-right:2px #d4c0a2 solid;}
			.jqueryCon div{float:left}
				.j1 span{width:120px;display:inline}
        .jqueryMenuDown{width:100%;height:7px;float:left;}
        <!--#jqueryClick{width:144px;height:20px;margin:2px auto 0 auto;cursor:pointer;background:url(images/menuClick.png) no-repeat}-->
		.j1{background:#f5f5f5;width:284px;height:100px;}
		.j2{background:#f5f5f5;width:170px;height:100px;}
		.j3{background:#f5f5f5;width:174px;height:100px;}
		.j4{background:#f5f5f5;width:176px;height:100px;}
		.j5{background:#f5f5f5;width:174px;height:100px;}
		.j6{background:#f5f5f5;width:174px;height:100px;}
		.j7{background:#f5f5f5;width:170px;height:100px;}
		.blue{color:#aa9c93}
		a.blue{color:#aa9c93;text-decoration: none}
		a:hover.blue{color:#0f0f0f;text-decoration: none}

 

Tag标签: select   jQuery  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规