【JS】封装组件（DropDown（下拉菜单））【JS】封装组件：DropDown（下拉

第一次写js组件｀（∩_∩）′，有什么不对的请随便指点出来，

单个下拉菜单组件

文章图片
单个下拉菜单效果图 【【JS】封装组件（DropDown（下拉菜单））】JS

//author：Ercyao (function(){ dropDown = function(id,items,title){ var oDiv, oP, oUL, oLis, oA, oLi; oDiv = document.getElementById(id); if(oDiv){ oP = document.createElement("p"); oUL = document.createElement("ul"); oDiv.appendChild(oP); oDiv.appendChild(oUL); oP.innerHTML = title; if(items){ items.map(function(item,index){ oLi =document.createElement("li") oA =document.createElement("a") oA.href = https://www.it610.com/article/item.url; oA.innerHTML = item.name; oLi.style.cssText ="list-style-type: none; " + "color:cadetblue; " + "overflow: hidden; " + "white-space: nowrap; " + "text-overflow: ellipsis; " + "background-color:#fff; " + "margin-bottom: 5px; " + "padding:0 5%; " + "box-shadow: 3px 3px 10px rgba(0,0,0,0.3); "; oA.style.cssText = "color:cadetblue; "+"text-decoration: none; "+"width:100%; " + "line-height:30px; "; oLi.appendChild(oA); oUL.appendChild(oLi); }) } oLis = oUL.children; oP.style.cssText = "color:white; " + "background-color:cadetblue; " + "box-shadow: 3px 3px 10px rgba(0,0,0,0.3); " + "width:90%; " + "line-height:30px; " + "padding:0 5%; " + "margin:0; "; oUL.style.cssText ="padding:5px 0 0; " + "margin:0; " + "width:100%; " + "visibility: hidden; "; //绑定事件 function bindEvent(){ oP.addEventListener('mouseover', onMouseover, false); oUL.addEventListener('mouseover', ULonMouseover, false); oDiv.addEventListener('mouseout', onMouseout, false); } //P鼠标经过 function onMouseover(){ oUL.style.visibility= "visible"; doAnimate(); } //UL鼠标经过 function ULonMouseover(){ oUL.style.visibility= "visible"; } //li标签经过和移出事件 for(var i=0; i< oLis.length; i++){ (function(x){ var aaa = oLis[x].getElementsByTagName("a")[0]; oLis[x].onmouseover=function(){ oLis[x].style.backgroundColor = "antiquewhite"; oLis[x].style.webkitTransform = 'scale(' + 1.2 + ') rotate(' + 5 + 'deg)'; oLis[x].style.MozTransform = 'scale(' + 1.2 + ') rotate(' + 5 + 'deg)'; oLis[x].style.transform = 'scale(' + 1.2 + ') rotate(' + 5 + 'deg)'; oLis[x].style.boxShadow = "0 5px 8px rgba(0,0,0,0.3); "; } oLis[x].onmouseout=function(){ oLis[x].style.backgroundColor = "#fff"; oLis[x].style.transform = 'scale(' + 1.0 + ') rotateY(' + 0 + 'deg)'; oLis[x].style.boxShadow = "3px 3px 10px rgba(0,0,0,0.3); "; } })(i); } //div鼠标移出 function onMouseout(){ oUL.style.visibility= "hidden"; } //动画效果 function doAnimate(){ var i = 0; setInterval(function(){ if(i < 360){ i += 5; oUL.style.transform = 'rotateY(' + i + 'deg)'; } },10) } if (oDiv.addEventListener) {bindEvent(); } } } }());

html

DropDown - Ercyao - 锐客网.drop-down-box{width: 100%; display: flex; justify-content: space-around; } .drop-down-box .drop-down{width: 120px; text-align: center; } .drop-down-box .drop-down ul{font-size: 14px; }

一次性生成多个下拉菜单

文章图片
多个下拉菜单效果图 JS

//author：Ercyao (function(){ dropDown = function(id,list){ var mUL, mLi; //父级菜单的ul、li var zUL, zP; //子级菜单的ul、p var oDiv, oP, oUL, oLis, oA, oLi; oDiv = document.getElementById(id); //获取id if(oDiv){ mUL = document.createElement("ul"); list.map(function(list,i){ mLi = document.createElement("li"); mUL.style.cssText = "display: flex; flex-flow: row wrap; width: 100%; "; mLi.style.cssText = "list-style-type: none; width: 30%; "; mUL.appendChild(mLi); oP = document.createElement("p"); oUL = document.createElement("ul"); // p和ul的样式设置 oP.style.cssText = "color:white; background-color:cadetblue; box-shadow: 3px 3px 10px rgba(0,0,0,0.3); width:90%; line-height:30px; padding:0 5%; margin:0; "; oUL.style.cssText ="padding:5px 0 0; margin:0; width:100%; visibility: hidden; "; mLi.appendChild(oP); mLi.appendChild(oUL); oDiv.appendChild(mUL); oP.innerHTML = list.title; var items = list.items; if(items){ items.map(function(item,index){ oLi =document.createElement("li") oA =document.createElement("a") oA.href = https://www.it610.com/article/item.url; oA.innerHTML = item.name; //li和a的样式设置 oLi.style.cssText ='list-style-type: none; color:cadetblue; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background-color:#fff; margin-bottom: 5px; padding:0 5%; box-shadow: 3px 3px 10px rgba(0,0,0,0.3); '; oA.style.cssText = 'color:cadetblue; text-decoration: none; width:100%; line-height:30px; '; oLi.appendChild(oA); oUL.appendChild(oLi); }) } }) mLis = mUL.children; for(var i=0; i< mLis.length; i++){ (function(x){ var zUL = mLis[x].lastChild; var zP = mLis[x].firstChild; zP.onmouseover=function(){ zUL.style.visibility= "visible"; zP.style.backgroundColor = "darksalmon"; oLis = zUL.children; //动画效果 var j = 0; setInterval(()=>{ if(j < 360){ j += 5; zUL.style.transform = 'rotateY(' + j + 'deg)'; } },10) oLisChange(); } zUL.onmouseover=function(){ zP.style.backgroundColor = "darksalmon"; zUL.style.visibility= "visible"; } mLis[x].onmouseout=function(){ zP.style.backgroundColor = "cadetblue"; zUL.style.visibility= "hidden"; } })(i); } //子菜单经过和移出事件 function oLisChange(){ for(var i=0; i< oLis.length; i++){ (function(x){ oLis[x].onmouseover=function(){ oLis[x].style.backgroundColor = "antiquewhite"; oLis[x].style.transform = 'scale(' + 1.1 + ') rotate(' + 5 + 'deg)'; oLis[x].style.boxShadow = "0 5px 8px rgba(0,0,0,0.3); "; } oLis[x].onmouseout=function(){ oLis[x].style.backgroundColor = "#fff"; oLis[x].style.transform = 'scale(' + 1.0 + ') rotateY(' + 0 + 'deg)'; oLis[x].style.boxShadow = "3px 3px 10px rgba(0,0,0,0.3); "; } })(i); } } } } }());

HTML