面向对象组件——下拉菜单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面向对象组件——下拉菜单相关的知识，希望对你有一定的参考价值。
效果：平时在网页上经常会看到导航栏在鼠标经过时，字体颜色和背景会改变，然后会显示下拉菜单。
原理：js实现在鼠标经过时，改变字体的颜色和背景，然后下拉菜单显示。一般情况下，下拉菜单处于隐藏的状态。
代码实现：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉菜单</title> 6 <style type="text/css"> 7 .droppanel{ 8 position: relative; 9 display: inline-block; 10 margin: 0 100px; 11 } 12 .dropbar{ 13 border: 1px solid black; 14 display: block; 15 font-size: 15px; 16 height: 20px; 17 line-height: 20px; 18 width: 50px; 19 background: #fff; 20 text-align: center; 21 } 22 .dropdown{ 23 display: none; 24 position: absolute; 25 text-align: center; 26 border: 1px solid grey; 27 } 28 .dropdown a{ 29 display: block; 30 width: 40px; 31 padding: 5px 5px; 32 text-decoration: none; 33 } 34 .dropbar:hover,.dropdown>a:hover{ 35 background:#17BDC1; 36 color:#fff; 37 } 38 /*.dropbar:hover .dropdown{ 39 display: block; 40 }*/ 41 </style> 42 </head> 43 <body> 44 <div class="droppanel"> 45 <div class="dropbar">水果 46 <div class="dropdown"> 47 <a href="">葡萄</a> 48 <a href="">草莓</a> 49 <a href="">芒果</a> 50 </div> 51 </div> 52 </div> 53 <script src="js/drop.js" type="text/javascript" charset="utf-8"></script> 54 <script type="text/javascript"> 55 var oBar=document.querySelector(‘.dropbar‘); 56 var oDown=document.querySelector(‘.dropdown‘); 57 var drop=new Drop(oBar,oDown); 58 drop.init(); 59 </script> 60 </body> 61 </html>
面向对象编程：
1 //构造函数：定义构造函数实例的私有属性 2 function Drop(box,ele){ 3 this.box=box; 4 this.ele=ele; 5 } 6 7 //构造函数的原型对象：定义构造函数实例共享的属性和方法 8 Drop.prototype={ 9 constructor:Drop, 10 init:function(){ 11 var _this=this; 12 13 this.box.onmouseover=function(){ 14 _this.ele.style.display=‘block‘; 15 } 16 this.box.onmouseout=function(){ 17 _this.ele.style.display=‘none‘; 18 } 19 } 20 }
除了下拉菜单之外，你还有更好的选择：http://www.woshipm.com/ucd/767661.html
以上是关于面向对象组件——下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章