div代替select
来源:互联网 发布:阿里云是paas 编辑:程序博客网 时间:2024/05/21 17:53
//CSS
.menu_h,.menu_v,.menu_h li,.menu_v li {
margin: 0;padding: 0;
line-height: 21px;
font-size: 12px;
list-style-type: none;
text-align:left;
display: inline;
}
.menu_h a {
display: block;
line-height: 17px;
text-decoration:none;
color:#807a62;
}
.menu_v a {
display: block;
line-height: 21px;
text-decoration:none;
color:#333333;
padding-left:3px;
}
.menu_h li {
float: left;
background-color: white;
}
.oneMenu {
background: url(/view/images/xjt.png) no-repeat right center;
width:82px;
margin:0;
padding-top:3px;
padding-left:3px;
}
.menu_v li {
float: none;
background-color: #white;
overflow: hidden;
}
.sub_menu_off .menu_v {
display: none;
background: white;
}
.sub_menu_on .menu_v {
display: block;
background: white;
border:1px solid #E4E9E9;
position: absolute;
word-wrap: break-word;
z-index: 99999;
list-style-position: outside;
max-height:300px;
Overflow-y:auto;
overflow-x: hidden;
}
.menu_v a:hover {
background: #CCC;
}
//js
$('.menu_v li').live('click',function(){
$(this).parent().parent().removeClass();
$(this).parent().parent().addClass("sub_menu_off");
$(this).parent().parent().children("a").html($(this).text());
var value = $(this).children("a").attr("value");
$(this).parent().parent().find("input[name='authType']").val(value);
});
$(".sub_menu_off").live('click',function(){
$(this).removeClass();
$(this).addClass("sub_menu_on");
$("body").bind("mousedown", {index:this}, function(e){
while (e.target != undefined && e.target != null && e.target.tagName.toUpperCase() != "BODY"){
if (e.target == e.data.index){
return false;
}
e.target = e.target.parentNode;
}
$(e.data.index).removeClass();
$(e.data.index).addClass("sub_menu_off");
$("body").unbind();
});
});
$(".sub_menu_on").live('click',function(){
$(this).removeClass();
$(this).addClass("sub_menu_off");
});
//html
<ul class="menu_h" >
<li class="sub_menu_off" id="topShow" >
<input type="hidden" name="authType" value="1"/>
<a href="#" class="oneMenu" >私密(仅个人可看)</a>
<ul class="menu_v" >
<li ><a style="width:100%;" href="javascript:;" value="1">私密(仅个人可看)</a></li>
<li ><a style="width:100%;" href="javascript:;" value="2">上级领导</a></li>
</ul>
</li>
</ul>
- div代替select
- select代替usleep
- div+ajax代替iframe
- div代替iframe
- div代替模态窗口
- DIV模拟select
- div 覆盖select
- div被select遮挡
- div被select遮挡
- Div 模拟 Select Demo
- div被select遮挡
- div 模拟select
- input+div 替代 select
- div 模拟select
- ABAP 使用Select Options代替Parameters
- 用div+iframe 代替frameset 框架
- 用div+iframe 代替frameset 框架
- css div多余文字用省略号代替
- 受限玻尔兹曼机(Restricted Boltzmann Machine, RBM) 简介
- :base()和:this()
- Springmvc中使用redirect:list.do 时无法跳转
- ScrollView中顶部控件显示不完整
- 图片加载
- div代替select
- TCP三次握手
- Volley
- <转载>WdatePicker日历控件使用方法
- Spring:事务详解
- Go语言几大命令简单介绍
- 黑马程序员——Java之多线程(上)
- 字符串截取成数组
- iOS中UI界面 初级数据持久化