无限联动菜单

深碍√TFBOYSˉ_ 2022-08-14 02:55 142阅读 0赞

跟上个下拉菜单的写法差不多.........

但是写的时候还是发现了一些问题  如:如何删除带参数事件,  解决方法找一个句柄就行了   就是把函数给一个变量..

记录一下

<body>  
<div id='ss' style=" height:100px; width:100px; background-color:\#0000FF"></div>  
<input value="add" type="button" onclick="ee(1)"/><input value="remove" type="button" onclick="ee(0)"/>  
<script>  
function $(Id)\{ return document.getElementById(Id)\};  
function addListener(element,e,fn)\{ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on"\+ e,fn)\} ;  
function removeListener(element,e,fn)\{ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on"\+ e,fn)\};  
var aa =null;  
function ee(arg)  
\{  
        arg?addListener($('ss'),'click',aa =function()\{aall('s')\}):removeListener($('ss'),'click',aa);//弄清添加和删除事件的句柄在哪  
\};  
  
function aall(s)\{  
    alert(s);  
\};  
</script>  
</body>  
哇  哈哈  直接复制过来原来还有高亮啊

如果有多个需要删除的事件  那不是需要设置很多变量了  恩  可以设置一个数组去存储删除......

<body>  
<div id='sss'></div><br><br><br><br>  
<div id='ssss'></div><br><br><br><br>  
<div id='sssss'></div><br><br><br><br>  
<div id='ssssss'></div><br><br><br><br>  
<script>  
 var data = \[  
      \{"txt":"人族","menu":\[  
                                \{"txt":"大法师","menu":\[  
                                                            \{"txt":"大法技能","menu":\[  
                      \{"txt":"水元素","menu":\[  
                            \{"txt":"召唤物"\},  
                              \{"txt":"穿刺攻击"\},  
                            \{"txt":"很好东西"\}  
               \]\},  
                        \{"txt":"暴风雪"\},  
                      \{"txt":"辉煌光环"\},  
                      \{"txt":"瞬间移动"\}  
               \]\},  
                                                            \{"txt":"英雄说明","menu":\[  
                      \{"txt":"智力英雄"\},  
                      \{"txt":"强大光环"\},  
                      \{"txt":"辅助型"\},  
               \]\}

\]\},  
                                \{"txt":"山丘之王","menu":\[  
                                                            \{"txt":"山丘技能","menu":\[  
                      \{"txt":"风暴之锤"\},  
                        \{"txt":"锥地"\},  
                      \{"txt":"锥晕"\},  
                      \{"txt":"天神下凡"\}  
                      \]\},  
                                                            \{"txt":"英雄说明","menu":\[  
                      \{"txt":"力量英雄"\},  
                      \{"txt":"秒杀能力"\},  
                      \{"txt":"个子很矮"\},  
                      \{"txt":"大技变态"\}  
                        
               \]\}

\]\},  
                                \{"txt":"圣骑士","menu":\[  
                                                            \{"txt":"圣骑技能","menu":\[  
                      \{"txt":"光"\},  
                        \{"txt":"无敌"\},  
                      \{"txt":"光环"\},  
                      \{"txt":"复活"\}  
                      \]\},  
                                                            \{"txt":"英雄说明","menu":\[  
                      \{"txt":"力量英雄"\},  
                      \{"txt":"辅助英雄"\},  
                      \{"txt":"人称奶妈"\}  
                        
               \]\}  
                                                            \]\},  
                                \{"txt":"血法师","menu":\[  
                                                            \{"txt":"血法技能","menu":\[  
                       \{"txt":"火焰"\},  
                         \{"txt":"吸蓝"\},  
                       \{"txt":"虚无"\},  
                       \{"txt":"神鸟凤凰"\}  
                       \]\},  
                                                            \{"txt":"英雄说明","menu":\[  
                      \{"txt":"智力英雄"\},  
                      \{"txt":"辅助英雄"\},  
                      \{"txt":"长的很帅"\}  
                        
               \]\}  
                                                            \]\}  
                                \]\},  
      \{"txt":"兽族","menu":\[  
                                \{"txt":"贱圣","menu":\[  
                                                            \{"txt":"贱圣技能","menu":\[  
                      \{"txt":"疾风步"\},  
                        \{"txt":"影分身"\},  
                      \{"txt":"致命一击"\},  
                      \{"txt":"剑刃风暴"\}  
                      \]\},  
                                                            \{"txt":"英雄说明","menu":\[  
                       \{"txt":"敏捷英雄"\},  
                       \{"txt":"高攻英雄"\},  
                       \{"txt":"杀人越货"\},  
                       \{"txt":"猥亵无敌"\},  
                       \{"txt":"非常强大"\}  
                        
               \]\}  
                                                            \]\},  
                                \{"txt":"先知男","menu":\[  
                                                            \{"txt":"先知技能","menu":\[  
                      \{"txt":"狼"\},  
                        \{"txt":"日"\},  
                      \{"txt":"闪电链"\},  
                      \{"txt":"地震"\}  
                      \]\},  
                                                            \{"txt":"英雄说明","menu":\[  
                       \{"txt":"智力英雄"\},  
                       \{"txt":"骚扰英雄"\}  
               \]\}  
                                                            \]\},  
                                \{"txt":"牛头人酋长","menu":\[  
                                                            \{"txt":"牛头技能","menu":\[  
                      \{"txt":"冲击波"\},  
                        \{"txt":"阵地"\},  
                      \{"txt":"耐久光环"\},  
                      \{"txt":"复活"\}  
                      \]\},  
                                                            \{"txt":"英雄说明","menu":\[  
                       \{"txt":"力量英雄"\},  
                       \{"txt":"魔法强大"\},  
                       \{"txt":"长的威猛"\},  
                       \{"txt":"一个肉盾"\}  
               \]\}  
                                                            \]\},  
                                \{"txt":"小YY","menu":\[  
                                                            \{"txt":"小Y技能","menu":\[  
                       \{"txt":"变动物"\},  
                         \{"txt":"治疗波"\},  
                       \{"txt":"小蛇棒子"\},  
                       \{"txt":"全体无敌"\}  
                       \]\},  
                                                            \{"txt":"英雄说明","menu":\[  
                       \{"txt":"敏捷英雄"\},  
                       \{"txt":"魔法强大"\},  
                       \{"txt":"辅助英雄"\}  
               \]\}  
                                                            \]\}  
                                \]\},  
      \{"txt":"不死族","menu":\[  
                                \{"txt":"死亡骑士","menu":\[  
                                                            \{"txt":"亡骑技能"\},  
                                                            \{"txt":"英雄说明"\}  
                                                            \]\},  
                                \{"txt":"巫妖","menu":\[  
                                                            \{"txt":"巫妖技能"\},  
                                                            \{"txt":"英雄说明"\}  
                                                            \]\},  
                                \{"txt":"恐惧魔王"\},  
                                \{"txt":"小强王子"\}  
                                \]\}  
   \];   
 function $(Id)\{return document.getElementById(Id)\};  
 function addListener(element,e,fn)\{ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)\}  
 function removeListener(element,e,fn)\{ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)\}  
 function create(elm,parent,fn)\{var element = document.createElement(elm);if(fn)fn(element);parent.appendChild(element);\}  
 var extend = function()    
 \{  
  var args = arguments;  
  if(!args\[1\])args = \[this,args\[0\]\];                                           
  for(var property in args\[1\])args\[0\]\[property\] = args\[1\]\[property\];             
  return args\[0\];  
 \};  
 var Class = function(properties)\{  
   var \_class = function()\{return (arguments\[0\] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;\};  
   \_class.prototype = properties;  
   return \_class;  
 \};  
 var newselect = new Class(\{  
   author:'Tz',  
   makeselect:function()\{  
    var self =this;  
       for(var i = 0; i<this.num;i++)  
             \{  
     this.container.innerHTML=this.container.innerHTML+"　"+this.title\[i\];  
     create('select',this.container,function(obj)\{  
     if(i==0)\{for(var j=0;j<self.data.length;j++)obj.options.add(new Option(self.data\[j\].txt,j))\}  
     \})  
             \}  
    var selects = this.container.getElementsByTagName("select");  
    addListener(selects\[0\],'change',function()\{self.change(selects,self.data\[selects\[0\].selectedIndex\].menu,1)\});  
    this.change(selects,this.data\[0\].menu,1,true);   
   \},  
    
   change:function(selects,data,num,o)\{  
    if(!selects\[num\])return;             
    if(!data)\{if(selects\[num\])selects\[num\].length=0;return;\}  
    var self =this;  
    selects\[num\].length=0;  
    for(var i=0;i<data.length;i++)        
     \{selects\[num\].options.add(new Option(data\[i\].txt,i))\}  
    if(o)  
     \{  
      addListener(selects\[num\],'change',this.temporary=function()\{self.change(selects,data\[selects\[num\].selectedIndex\].menu,(num+1))\})  
      this.fsgevent.push(\[this.temporary,selects\[num\]\])  
     \}  
    else  
     \{  
       for(var i =0 ;i<this.fsgevent.length;i++)  
       \{if(selects\[num\]==this.fsgevent\[i\]\[1\])\{removeListener(selects\[num\],'change',this.fsgevent\[i\]\[0\]);this.fsgevent.splice(i,1)\}\}  
      addListener(selects\[num\],'change',this.temporary=function()\{self.change(selects,data\[selects\[num\].selectedIndex\].menu,(num+1))\})  
      this.fsgevent.push(\[this.temporary,selects\[num\]\])      
     \}     
    o?(this.change(selects,data\[selects\[num\].selectedIndex\].menu,num+1,o)):(this.change(selects,data\[selects\[num\].selectedIndex\].menu,num+1))     
   \},  
    
   initialize:function()\{  
       this.container='';  
    this.fsgevent=\[\];  
    this.temporary  
   \}  
   \})  
    newselect.Getselect=function(arg)\{  
  return extend(new newselect,arg||\{\})  
 \}  
   var gggggg= newselect.Getselect(\{container:$('ssssss'),data:data,num:5,title:\['种族','英雄','选项','介绍','凑数'\]\})  
   gggggg.makeselect()  
   var ggggg= newselect.Getselect(\{container:$('sssss'),data:data,num:4,title:\['种族','英雄','选项','介绍'\]\})  
   ggggg.makeselect()  
   var gggg= newselect.Getselect(\{container:$('ssss'),data:data,num:3,title:\['种族','英雄','选项'\]\})  
   gggg.makeselect()  
   var gggg= newselect.Getselect(\{container:$('sss'),data:data,num:2,title:\['种族','英雄'\]\})  
   gggg.makeselect()         
</script>  
</body>