HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<div id="my-dropdown">
<a href="#">大标题</a>
<ul>
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
</ul>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/demo.js"></script>
<script>
$("#my-dropdown").mydropdown();
</script>
</body>
</html>
CSS:
/*自定义css样式*/
a{text-decoration:none;color:#000;}
.dropdown{position:relative;height:150px;72px;}
.dropdown>[data-trigger="dropdown"]{
padding:6px 10px;
border:1px solid #aaa;
border-radius:6px;
}
.dropdown-menu{/*起始状态*/
list-style:none;
margin:0;padding:0;
border:1px solid #aaa;
position:absolute;
top:30px;
height:0;
opacity:0;
overflow:hidden;
transition:all .5s linear;
}
.dropdown-menu>li{50px;padding:10px;}
.dropdown-menu>li:hover{background:orange;}
.dropdown>.in{/*结束状态*/
opacity:1;height:150px;
}
JS:
//判断是否引入jquery.js
if(typeof(window.jQuery)!="function")
throw new Error("下拉列表组件依赖于jQuery.js")
else{
jQuery.fn.mydropdown=function(){
this.addClass("dropdown");
this.children(":first")
.attr("data-trigger","dropdown")
.next().addClass("dropdown-menu");
this.hover(function(){
$(this).children(".dropdown-menu")
.toggleClass("in")
});
}
}
没有过多css修饰，比较简单。。。