HTML部分:
<div class="dropdown" name="mbrName" style="z-index: 1000; margin: 50px;">
<input class="dropdown-value" type="text" placeholder="input模拟下拉框">
<ul class="dropdown-menu menu-sponsors" role="menu" aria-labelledby="dLabel">
<li><a>这是第一个</a></li>
<li><a>这是第二个</a></li>
<li><a>这是第三个</a></li>
<li><a>这是第四个</a></li>
<li><a>这是第五个</a></li>
</ul>
</div>
<br><hr><br>
<div class="dropdown" style="z-index: 999; margin: 50px;">
<a><span class="dropdown-value">a标签模拟下拉框x</span></a>
<ul class="dropdown-menu menu-sponsors" role="menu" aria-labelledby="dLabel">
<li><a>a标签模拟下拉框1</a></li>
<li><a>a标签模拟下拉框2</a></li>
<li><a>a标签模拟下拉框3</a></li>
<li><a>a标签模拟下拉框4</a></li>
<li><a>a标签模拟下拉框5</a></li>
</ul>
</div>
CSS部分:
*{margin: 0;padding: 0;}
.dropdown{
display: inline-block;
position: relative;
background-color: #FFF;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
input[type="text"]{
display: inline-block;
width: 150px;
height: 20px;
line-height: 20px;
padding: 6px 20px 6px 10px;
border: 1px solid #CCC;
background-color: #FFF;
color: #333;
border-radius: 4px;
vertical-align: middle;
}
.dropdown .dropdown-menu{
float: left;min-width: 90px;
position: absolute;
left: -1px;
display: none;
width: 100%;
padding: 0;
z-index: 1000;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
overflow-y: auto;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
cursor: pointer;
}
.dropdown-menu>li>a{
display: block;
padding: 3px 20px;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.dropdown a{
display: inline-block;
padding: 6px 20px 6px 10px;
width: 100%;
color: #4A4A4A;
overflow: hidden;
vertical-align: middle;
text-decoration: none;
box-sizing: border-box;
}
.dropdown-menu>li>a:hover{
background: #CCC;
}
.show{
display: block !important;
}
JS部分:
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
(function($){
$.fn.dropdown = function(options){
var opts = jQuery.extend({
listers:{
'select':function($menu,$selected){}
}
},options||{});
this.getSelected = function(){
return this[0].selected;
}
return this.each(function(){
var item = $(this);
item.bind('click',function(e){
var $menu = $(this).children('.dropdown-menu');
$('.dropdown-menu').removeClass('show');
$menu.addClass('show');
$menu.delegate('li','click',function(e){
item[0].selected = {name:this.innerText,value:this.getAttribute('index')};
var dropDownValue = item.find('.dropdown-value');
if(dropDownValue[0].tagName == 'INPUT'){
dropDownValue.val($(this).text());
}else{
dropDownValue.text($(this).text());
}
dropDownValue.css('color','');
$menu.removeClass('show');
$(this).undelegate('click');
opts.listers.select.apply(item,[$menu,$(this)]); //触发组件的选择事件
e.stopPropagation();
});
$('body').bind('click',function(){
$('.dropdown-menu').removeClass('show');
$('body').unbind('click');
});
e.stopPropagation();
})
})
}
$('.dropdown').dropdown();
})(jQuery);
</script>