三级联动菜单
-
项目分析
-
效果
-
前端
=>面向对象
=>首先分析下拉结构,构造相应的结构和样式
=>绑定事件,点击,鼠标滑过等
=>导入写好的 js 文件 构造菜单项、
=>使用ajax请求服务端 获取数据
=>用每次获取的数据动态生成页面结构
-
服务端
=>接口文档(定义接口,服务地址,端口}
=>存储数据
=>创建服务器
=>接收前端的ajax请求,响应数据
-
-
代码
-
面向对象代码
export default class Select{ //添加css样式 static addCSS(selector,style,title){ if(title===undefined) title="xietian"; var arr=Array.from(document.styleSheets); var styleSheet=arr.reduce(function(value,item){ if(item.title===title)return item; return value; },null); if(!styleSheet){ var s=document.createElement("style"); s.title=title; document.head.appendChild(s); styleSheet=document.styleSheets[document.styleSheets.length-1]; } var str=""; for(var prop in style){ str+=prop.replace(/[A-Z]/g,function(value){ return "-"+value.toLowerCase(); })+":"+(typeof style[prop]==="number" ? style[prop]+"px" : style[prop])+";"; } if(styleSheet.addRule){ styleSheet.addRule(selector,str,styleSheet.cssRules.length); }else{ styleSheet.insertRule(selector+"{ "+str+" }",styleSheet.cssRules.length); } } //定义全局变量 button; ul; class; constructor(parent,_class) { // this.id = _id; this.class = _class; this.elem = this.createEle(); this.appendTo(parent); } //创建元素 createEle() { const div = document.createElement('div'); div.className = "dropdown " + this.class; this.button = document.createElement('button'); this.button.className = "btn btn-default dropdown-toggle"; this.button.addEventListener('click',e=>this.clickHander(e)) this.content = document.createElement('span'); this.content.innerText = "请选择"; const carte = document.createElement('spa
-