封转的自定义小组件（下拉菜单）

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;width: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{width: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修饰，比较简单。。。

posted @ 2017-04-11 11:00  Harlem  阅读(263)  评论(0)    收藏  举报