六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

纯JS添加一级二级菜单的代码

Admin | 2015-5-24 8:52:53 | ReadNums | 1947 | 标签 网页制作 | 打印本页
     

  前提条件,页面中有一个ID为MyMenu的div对象。同时,相应的属性设置如下:

  <div id="MyMenu" class="MyMenuFirst"></div>,其中,CSS代码为:

  <style type="text/css">
  .MyMenuFirst ul{list-style-type:none; margin:0px;margin-left:12px; padding:0px;} /*让UL不显示点号*/
  .MyMenuFirst li{list-style-type:none;padding:2px 1px;} /*li之间的距离*/
  .MyMenuFirst img{vertical-align:middle;} /*让图片与文字居中对齐*/

  </style>

  最后,JS代码如下

  <script language="javascript" type="text/javascript">
window.onload = function()
{
  AddFristNode();
}
function AddFristNode()//添加一级菜单UL
{
  for(var m=1;m<=2;m++)
  {
    var MyMenuDiv=document.getElementById("MyMenu");
    var MyUL = document.createElement("ul");
 var MyULID="ul"+m;
    MyUL.setAttribute("id",MyULID);
    for (var i=1;i<=3;i++)
    {
      var MyLIid=MyULID+"li"+i;
     var MyLI = document.createElement("li");
      MyLI.setAttribute("id",MyLIid);
   MyLI.innerHTML = "<img src='MenuImg/folderClosed.gif'/>一级菜单"+MyLIid;
   MyLI.onclick=function() { AddChild(this) };//为li动态添加事件
   MyUL.appendChild(MyLI);
    }
    MyMenuDiv.appendChild(MyUL);
  }
}
function AddChild(obj)
{
  if(document.getElementById(obj.id).childNodes.length>2)
  {
    alert(obj.id+","+document.getElementById(obj.id).childNodes.item[0]);
    return;//如果已添加过子节点,下次点击即不用重复添加
  }
  var MyUL = document.createElement("ul");
  MyUL.setAttribute("id",obj.id+"ul1");
  for (var i=1;i<=3;i++)
  {
    var MyLIid="";
 MyLIid=MyUL.id+"li"+i;
 var MyLI = document.createElement("li");
    MyLI.setAttribute("id",MyLIid);
 MyLI.innerHTML = "<img src='MenuImg/folderClosed.gif'/>二级子菜单"+obj.id+"ul1"+"li"+i;
 MyLI.style.display='block';
 MyLI.onclick=function() { MenuEvent(this,obj.id) };//为li动态添加事件
    MyUL.appendChild(MyLI);
  }
  var GetLi=document.getElementById(obj.id);
  GetLi.appendChild(MyUL);
}
function MenuEvent(obj,MyUL)
{
  alert(obj.id+","+MyUL);
}
</script>


问题未解决:在线咨询

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日