创建隐藏的菜单

最新推荐文章于 2025-06-03 10:04:55 发布

yuyu83

最新推荐文章于 2025-06-03 10:04:55 发布

阅读量138

点赞数

分类专栏：脚本语言文章标签： prototype

脚本语言专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用JavaScript创建可隐藏菜单的方法。通过监听点击事件来显示或隐藏子菜单，适用于网页应用中需要节省空间展示菜单选项的场景。文章详细展示了如何初始化菜单、设置样式及绑定事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建隐藏的菜单

/**
*创建隐藏的菜单 yu jian

*************************
*arraySub: 子菜单的VALUE array数组；
*aSubs：子菜单的链接 array数组；
*id: 父菜单的ID；
*id: select的id
*/
var SubHead=Class.create();
SubHead.prototype = {
initialize:function(arraySub,aSubs,id,_id){
  this.arraySub=arraySub;
  this.id=document.getElementById(id);
  this.aSubs=aSubs;
  this.isDis=false;
  this._id=document.getElementById(_id);
  if(_id){
   this._id.onclick=this.doClick.bindAsEventListener(this);
  }
  else{
   this.id.onclick=this.doClick.bindAsEventListener(this);
  }

  this.makeDiv();
  this.createSub();
},
makeDiv: function(){//在此设置该div样式
  this.subDiv=document.createElement("div");
  this.subDiv.className="yuy"
  this.id.appendChild(this.subDiv);
},
doClick:function () {
  if(this.isDis)this.isDis=false;
  else this.isDis=true;
  this.showSub();
},
showSub:function(){
  if(this.isDis){
   this.subDiv.style.display="";
  }
  else{
   this.subDiv.style.display="none"
  }
},
createSub:function(){
  this.subDiv.style.display="none";
  var divs=new Array(this.arraySub.length);
  for(var i=0;i<this.arraySub.length;i++){
   divs[i]=document.createElement("div");
   divs[i].innerHTML='<img src="../../../../lib/images/group/arrow.gif" width="3" height="5">'+'<a '+'href='+this.aSubs[i]+'>'+this.arraySub[i]+'</a>';
   this.subDiv.appendChild(divs[i]);
  }
}
}