Dzwebs.Net

撰写电脑技术杂文十余年

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

Admin | 2015-5-24 8:52:53 | 被阅次数 | 5062

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  前提条件,页面中有一个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>


该杂文来自: 网页制作杂文

上一篇:消除div内部的a标签链接间距的方法

下一篇:JS设置客户端span,label标签的值

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计