html一级二级菜单,纯JS添加一级二级菜单的代码
前提条件,页面中有一个ID为MyMenu的div对象。同时,相应的属性设置如下:
.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;} /*让图片与文字居中对齐*/
最后,JS代码如下
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 = "一级菜单"+MyLIid;
MyLI.οnclick=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 = "二级子菜单"+obj.id+"ul1"+"li"+i;
MyLI.style.display='block';
MyLI.οnclick=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);
}
html一级二级菜单,纯JS添加一级二级菜单的代码相关推荐
- html如何创建二级标题,Word如何添加一级二级标题等多级标题
word是目前非常实用的办公软件,我们在编辑文字的时候总会根据内容添加相关的标题,那么怎么添加一级二级标题等多级标题呢? 打开Word,点击"引用". 点击"目录&quo ...
- php赛车源码,纯JS单页面赛车游戏制作代码分享
分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 Best Fly Car input { border: 1px ...
- html用css做下拉菜单,纯css实现下拉菜单
纯css实现下拉菜单 1.效果如下: 2.html代码 时间最近 时间最近 评论最多 被赞最多 3.css代码 * { margin: 0; padding: 0; } ul { list-style ...
- 二级级联菜单---纯js实现
2019独角兽企业重金招聘Python工程师标准>>> 直接拷贝过去成html文件就可以看到效果了. 1.html文件 <!DOCTYPE html PUBLIC " ...
- 中国地区三级联动菜单(纯js制作)
第一步:在网页中写入如下代码: <!DOCTYPE html> <!--次行代表使用的是html5,如果不支持请换成html4--> <html> <head ...
- php 实现背景图片轮换,纯js实现背景图片切换效果代码
html代码 背景切换 因为javascript逻辑顺序比较强,所以要考虑引用js的位置 css代码 body {font-size:12px;} div{ width:950px; height:8 ...
- 【转】纯JS省市区三级联动(行政区划代码更新至2015-9-30)
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...
- 纯JS省市区三级联动(行政区划代码更新至2015-9-30)
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...
- html中怎么做扇形菜单,纯CSS3实现扇形动画菜单(简化版)实例源码
之前的一篇文章介绍这种效果的实现,但实现代码太过繁琐,所以在这里分享以下简化版的实现方法,有需要的可以参考学习. 原文章请点击这里 简化版完整实例 CSS3扇形动画菜单 *{padding: 0; m ...
最新文章
- logstash入门
- redis系列:通过文章点赞排名案例学习sortedset命令
- 关于for中思维卡机的小悲剧
- python输入多个字符串、输入最长的一串_无重复字符的最长子串(Python之暴力求解)...
- 《Linux高性能服务器编程》学习总结(四)——TCP/IP通信案例:访问Internet上的Web服务器...
- 如何让你的 JS 写得更漂亮,看这篇就对了!
- java网络编程 个人心得
- [数据库]---nosql,非关系型数据库整理
- c语言程序设计实践教程编程题8.3,C语言程序设计教程(21世纪计算机科学与技术实践型教程)...
- bzoj 2627: JZPKIL [伯努利数 Pollard-rho]
- ETL调度工具 taskctl-> Designer 设计IDE环境
- 移动端web开发之坑---input内文字与同行文字不对齐问题
- 深入理解分布式技术 - 容器化技术
- 查看计算机内存过高,物理内存过高怎么办,小编教你电脑物理内存过高怎么办...
- 电脑的字体改变了、变模糊了怎么办
- 阿里巴开发手册之隐式传递resolveActivity检查
- 【观察】一周之后,浪潮云ERP将直面数字化转型2.0四大攻坚战
- 知乎500万人热议:如何快速培养英语思维方式?
- Antd源码浅析(二)InputNumber组件 一
- Three.js--》实现3d官网模型展示
热门文章
- Python3 列表list合并的4种方法
- PyCharm3.0默认快捷键
- 王者荣耀连接不上服务器最新赛季排名,王者荣耀新赛季连掉三段 初期不能打排位是有原因的...
- 如何求解单边z变换_的单边Z变换。.ppt
- 什么是长连接和短连接?(长链接、短链接)什么时候使用长连接、短链接?
- source insight(SI)C/C++符号标记含义
- 什么是序列化?python pickle模块
- python Intel Realsense udp协议 局域网传输实时视频流并通过窗口显示 (opencv压缩解码)
- Tensorflow yolov3 Intel Realsense D435 多进程multiprocessing线程池pool识别时间测试
- 日期格式校验方法工具