javascript菜单的实现方法：首先将菜单用一个表格行来表示；然后将此菜单下的所有菜单项紧跟在菜单后放在一个表格行中的仅有的一个单元格中；最后用js代码来处理菜单的点击事件。
本教程操作环境：windows7系统、javascript1.8.5版，DELL G3电脑。
javascript菜单的实现方法：
1、将菜单(Menu)用一个表格行来表示，其中只有一个单元格，内容是菜单的名称 ,如：
Html代码
立即学习“Java免费学习笔记（深入）”；
基础数据管理 基础数据管理
登录后复制
这个地方给表示菜单的单元格也定义了一个ID,这个ID的定义是非常重要的，在整个页面中都是可见的，这样就可以通过ID来
指定其所代表元素的属性。单元格的内容是一个超连接，他指定一个javascript方法，响应点击此菜单后的事件 .
2、将此菜单下的所有菜单项紧跟在菜单后放在一个表格行中的仅有的一个单元格中，使用换行来将他们竖起排列
Html代码
立即学习“Java免费学习笔记（深入）”；
登录后复制
这个地方注意，为放置菜单项的这个表格行定义了一个ID，对菜单的展开与折叠将通过这个ID来控制，另外，菜单的初始状态是折叠的，即这一行不可见，所以使用了CSS代码 style=”display:none”
3、第三步就是整个过程中的重点了，需要写一段js代码来处理菜单的点击事件
Js代码 复制代码
var classCount = 4; // 菜单大类的个数 function Show(theId) {//参数为菜单的编号，从0开始 theTr = eval("tr_" + theId); //生成相应元素的在页面中的ID //通过此ID来设置相应元素的CSS属性 //如果是折叠的，则展开之 if (theTr.style.display == "none") { theTr.style.display = "block"; } //否则折叠之 else { theTr.style.display = "none"; } //遍历关闭之前展开的菜单(对当前菜单不做处理) for (i = 0; i < classCount; i++) { if (i == theId) continue; theTr = eval("tr_" + i); theTr.style.display = "none"; } } var classCount = 4; // 菜单大类的个数 function Show(theId) {//参数为菜单的编号，从0开始 theTr = eval("tr_" + theId); //生成相应元素的在页面中的ID //通过此ID来设置相应元素的CSS属性 //如果是折叠的，则展开之if (theTr.style.display == "none") {theTr.style.display = "block";} //否则折叠之else {theTr.style.display = "none";} //遍历关闭之前展开的菜单(对当前菜单不做处理) for (i = 0; i < classCount; i++) {if (i == theId)continue;theTr = eval("tr_" + i);theTr.style.display = "none";} }
登录后复制
相关免费学习推荐：javascript学习教程
以上就是javascript菜单如何实现的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2715362.html
