利用jquery高仿select下拉菜单效果

来源：互联网发布：淘宝联盟登陆要认证编辑：程序博客网时间：2024/04/30 20:42

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>高仿select下拉菜单效果</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<style>
body,div,p,i,ul,span,a{margin:0;padding:0;}
body{font-family:"微软雅黑";padding-left:100px;padding-top:100px;}.mr-20{margin-right:20px;}ul,ol{list-style:none;}a{text-decoration:none;color:inherit;outline:none;}

/*下拉菜单基本样式*/
.selectModel{background:#fff;cursor:pointer;position:relative;border:1px solid #ececec;display:inline-block;width:130px;height:30px;}
.selectModel .cur-select{width:100%;height:100%;text-align:center;}
.selectModel .dropdown{position:absolute;left:0;display:none;width:100%;}
.selectModel .dropdown li{background:#fff;text-align:center;border:1px solid #ececec;margin-top:-1px;}
.selectModel .dropdown li>a{display:block;width:100%;height:100%;}
.selectModel .dropdown li:hover{color:#fff;background:#ff6b6b;}

/*可以设置宽高行间距、边框颜色等来覆盖原样式*/
.selectModel{width:147px;height:35px;line-height:35px;}
.selectModel li{line-height:40px;}
</style>
<body>


<div class="selectModel mr-20" id="fruits">
<p class="cur-select">
<span class="selectedText">水果</span>    <i class="fa fa-caret-down"></i>
</p>
<ul class="dropdown">
<li><a href="javascript:void(0);">香蕉</a></li>
<li><a href="javascript:void(0);">苹果</a></li>
<li><a href="javascript:void(0);">樱桃</a></li>
<li><a href="javascript:void(0);">雪梨</a></li>
<li><a href="javascript:void(0);">猕猴桃</a></li>
</ul>
</div>



<div class="selectModel" id="fruits1">
<p class="cur-select">
<span class="selectedText">水果1</span>    <i class="fa fa-caret-down"></i>
</p>
<ul class="dropdown">
<li><a href="javascript:void(0);">香蕉1</a></li>
<li><a href="javascript:void(0);">苹果1</a></li>
<li><a href="javascript:void(0);">樱桃1</a></li>
<li><a href="javascript:void(0);">雪梨1</a></li>
<li><a href="javascript:void(0);">猕猴桃1</a></li>
</ul>
</div>

<script>
selectApiGetId("fruits");
selectApiGetId("fruits1");

//下拉菜单js，还原select效果
function selectApiGetId(id){
var $this=$("#"+id);
var $dropdown=$this.find(".dropdown");
var $arrow=$this.find(".fa");
var $li=$this.find("li");
var $select=$this.find(".cur-select");
$(document).on("click",function(event){
$dropdown.hide();
$arrow.removeClass("fa-caret-up");
});
$select.click(function(event){
//当有多个下拉菜单，点击其中一个下拉菜单，其他菜单隐藏
$(".dropdown").each(function(){
if(!$(this).parent().is("#"+id)){
$(this).hide();
$(this).siblings(".cur-select").find(".fa").removeClass("fa-caret-up");
}
});
event.stopPropagation();
$dropdown.toggle();
$arrow.toggleClass("fa-caret-up");
});
$li.click(function(){
$this.find(".selectedText").text($(this).text());
});
}
</script>
</body>
</html>

0 0