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>

0 0