JavaScript小练习效果之多级菜单

最新推荐文章于 2021-06-27 06:33:13 发布
最新推荐文章于 2021-06-27 06:33:13 发布
阅读量1.6k 收藏
点赞数
分类专栏： javascript 网站小效果 文章标签： JavaScript 多级菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lee_magnum/article/details/17853017
版权

　　


练习要求



　　1，布局可以随意添加或者删除，只要保证格式完整就可以自适应js代码。

　　2，每次点击只展开当前菜单，其它菜单如果有展开则全部收回。

　　3，当前菜单可以点击展开，也可以点击收缩。

　　4，前面的展开收缩符号要有相应的变化 “+” “-”



HTML代码



<ul id="nav">
    <li>
        <h2><span>+</span> 第一级菜单 </h2>
        <ul>
            <li>
                <h2><span>+</span> 第二级菜单 </h2>
                <ul>
                    <li>
                        <h2><span>+</span> 第三级菜单 </h2>
                        <ul>
                            <li>
                                <h2><span>+</span> 第四级菜单 </h2>
                                <ul>
                                    <li>
                                    	<h2><span>+</span>第五级菜单 </h2>
                                        <ul>
                                            <li>
                                                <h2> 第六级菜单 </h2>
                                            </li>
                                            <li>
                                                <h2> 第六级菜单 </h2>
                                            </li>
                                            <li>
                                                <h2> 第六级菜单 </h2>
                                            </li>
                                            <li>
                                                <h2> 第六级菜单 </h2>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                    	<h2> 第五级菜单 </h2>
                                    </li>
                                    <li>
                                    	<h2> 第五级菜单 </h2>
                                    </li>
                                    <li>
                                    	<h2> 第五级菜单 </h2>
                                    </li>
                                </ul>
                            </li>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                            <li>
                           		<h2> 第四级菜单 </h2>
                            </li>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                        </ul>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                </ul>
            </li>
            <li>
                <h2><span>+</span> 第二级菜单 </h2>
                <ul>
                    <li>
                        <h2><span>+</span> 第三级菜单 </h2>
                        <ul>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                        </ul>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                </ul>
            </li>
            <li>
            	<h2> 第二级菜单 </h2>
            </li>
            <li>
            	<h2> 第二级菜单 </h2>
            </li>
        </ul>
    </li>
    <li>
        <h2><span>+</span> 第一级菜单 </h2>
        <ul>
            <li>
                <h2><span>+</span> 第二级菜单 </h2>
                <ul>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                </ul>
            </li>
            <li>
                <h2><span>+</span> 第二级菜单 </h2>
                <ul>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                </ul>
            </li>
            <li>
            	<h2> 第二级菜单 </h2>
            </li>
            <li>
            	<h2> 第二级菜单 </h2>
            </li>
        </ul>
    </li>
    <li>
        <h2><span>+</span> 第一级菜单 </h2>
        <ul>
            <li>
                <h2><span>+</span> 第二级菜单 </h2>
                <ul>
                    <li>
                        <h2><span>+</span> 第三级菜单 </h2>
                        <ul>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                        </ul>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                </ul>
            </li>
            <li>
                <h2><span>+</span> 第二级菜单 </h2>
                <ul>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                </ul>
            </li>
            <li>
            	<h2> 第二级菜单 </h2>
            </li>
            <li>
            	<h2> 第二级菜单 </h2>
            </li>
        </ul>
    </li>
    <li>
        <h2><span>+</span> 第一级菜单 </h2>
        <ul>
            <li>
                <h2><span>+</span> 第二级菜单 </h2>
                <ul>
                    <li>
                        <h2><span>+</span> 第三级菜单 </h2>
                        <ul>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                            <li>
                            	<h2> 第四级菜单 </h2>
                            </li>
                        </ul>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                </ul>
            </li>
            <li>
                <h2><span>+</span> 第二级菜单 </h2>
                <ul>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                    <li>
                    	<h2> 第三级菜单 </h2>
                    </li>
                </ul>
            </li>
            <li>
            	<h2> 第二级菜单 </h2>
            </li>
            <li>
            	<h2> 第二级菜单 </h2>
            </li>
        </ul>
    </li>
</ul>



CSS代码



ul, h2 {margin: 0;padding: 0;}
li {list-style: none;}
#nav {border: 1px solid #333;float: left;padding: 5px 0;background: #ccf;}
#nav ul {padding-left: 20px;display: none;}
#nav h2 {font-size: 16px;height: 25px;line-height: 25px;padding: 0 15px;}


JavaScript代码



var oNav = document.getElementById('nav');
var aH2 = oNav.getElementsByTagName('h2');

for(var i=0; i<aH2.length; i++){
	
	aH2[i].onclick = function(){
		
		var oUl = getNext(this);
		var oSpan = getFirst(this);
		var oParent = this.parentNode.parentNode;
		var aUl = oParent.getElementsByTagName('ul');
		var aSpan = oParent.getElementsByTagName('span');
		
		if(oUl){
			
			if(oUl.style.display == 'block'){
			
				oUl.style.display = "none";
				oSpan.innerHTML = "+";	
				
			}else{
				
				for(var i=0; i<aUl.length; i++){
					aUl[i].style.display = 'none';	
					aSpan[i].innerHTML = "+";					
				}
				oUl.style.display = "block";
				oSpan.innerHTML = "-";	
				
			}
		
		}
		
	};
	
}



function getPrev( obj ){

	if( !obj || !obj.previousSibling )return null;
	
	return obj.previousSibling.nodeType===1 ? obj.previousSibling : getPrev( obj.previousSibling ); //递归
	
}

function getNext( obj ){

	if( !obj || !obj.nextSibling )return null;
	
	return obj.nextSibling.nodeType===1 ? obj.nextSibling : getNext( obj.nextSibling ); //递归
	
}

function getFirst( obj ){

	if( !obj || !obj.firstChild )return null;
	
	return obj.firstChild.nodeType===1 ? obj.firstChild : getNext( obj.firstChild ); //递归
	
}

function getLast( obj ){

	if( !obj || !obj.lastChild )return null;
	
	return obj.lastChild.nodeType===1 ? obj.lastChild : getPrev( obj.lastChild ); //递归
	
}


云圣天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
多级联动菜单（js）
qq_59517599的博客
07-15 1509
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多.
原生js手动实现一个多级树状菜单效果（高度可过渡变化） + 模拟el-menu组件实现（简单版）
最新发布
pscool的博客
05-13 2288
效果图 代码 要点 需要注意这个dom结构， 过渡动画一定要有开始和结束值才能产生动画，并且在js里面修改的时候，不能连着修改，要把第二次修改放到setTimeout里面 为了让菜单能够不是一次性过渡（让它可以一直产生过渡动画），需要在动画结束后，清理掉设置的高度，这个设置的高度只需要在动画的时候生效。 <style lang="scss" scoped> @import url(//at.alicdn.com/t/c/font_4065865_kb7oyb2wje9.css); ul,
JS四级树形结构菜单.zip
05-23
JS四级树形结构菜单，四级树形菜单，鼠标点击菜单展开收缩。
js联动三级,四级菜单特效
管子（zero）的杂乱空间
11-19 1721
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--> window.google_render_ad(
gallery图片添加倒影显示及spinner多级联动效果
03-28
NULL 博文链接：https://jykenan.iteye.com/blog/1254866
老裴帮助关于Javascript动态菜单树的小练习
03-19
本小练习将带你深入理解如何使用JavaScript实现这样的功能。 在开始之前，了解一些基础概念是必要的。JavaScript是一种脚本语言，主要运行在浏览器环境中，负责处理网页的动态行为。它可以通过DOM（Document Object...
JavaScript 多级联动浮动菜单
01-29
在多级菜单中，当用户点击一级菜单项时，与之相关的二级或更多级子菜单会自动展开或收起。这种联动效果增强了用户体验，使得用户可以快速地浏览和访问网站内容。 浮动菜单（Fixed Menu）则指的是菜单在页面滚动时...
多级菜单实例 多级菜单实例 多级菜单实例
01-24
在IT领域，多级菜单是一种常见的用户界面设计元素，它被广泛应用于网站、应用程序和操作系统中，用于组织和展示复杂的导航结构。一个典型的多级菜单可以让用户通过点击主菜单项来展开子菜单，子菜单中可能还包含下一...
有动画效果的菜单切换
01-22
总结起来，“有动画效果的菜单切换”是一个增强网站用户体验的工具，它利用jQuery或Zepto实现动态菜单切换，支持多级菜单和多种动画效果。通过理解和应用这种技术，开发者能够创建更具吸引力和交互性的网页，提高...
JS-Exercise:JS小练习
05-10
在这个名为"JS-Exercise"的练习集中，我们将会探讨几个基本但非常实用的JS应用，包括图片切换、自动播放、键盘控制以及轮播图和菜单的实现。这些功能都是构建动态网页不可或缺的部分。 首先，"点击按钮切换图片"是...
JS多级联动下拉列表（自定义级数）
06-03
原生JS写的多级联动下拉列表，联动级数可以自定义，不限级数。可用作省、市、区联动，或其他的多级分类选择。使用方法请参考demo文件。
css3实现的多级渐变下拉菜单导航效果代码
09-24
主要为大家介绍了css3实现的多级渐变下拉菜单导航效果代码,通过纯css3技术实现圆角图形及渐变按钮的模拟效果,具有一定参考借鉴价值,需要的朋友可以参考下
html多层部门怎么显示_javascript实现在下拉列表中显示多级树形菜单的方法
weixin_39586353的博客
12-22 339
本文实例讲述了javascript实现在下拉列表中显示多级树形菜单的方法。分享给大家供大家参考。具体如下：这里演示在下拉列表框中显示分级的菜单，在很多网站都可以看到的效果，很实用，下拉列表框中的选项是利用JS控制输出，如果你有更好的办法不用JS来显示，那最好了，因为像这种菜单用JS来实现，多多少少有点麻烦。运行效果截图如下：具体代码如下：/p>"http://www.w3.org/TR/xh...
JS--jQuery实现的多级下拉菜单效果代码
Juunnry的博客
10-25 2554
这篇文章主要介绍了jQuery实现的多级下拉菜单效果代码,涉及jquery鼠标事件及页面元素的显示与隐藏效果实现技巧,非常具有实用价值,需要的朋友可以参考下: 本文实例讲述了jQuery实现的多级下拉菜单效果代码。供大家参考。具体如下： 这是一款jQuery多级下拉菜单，在支持html5的浏览器中测试你会发现本菜单很智能，会自动判断浏览器边界来改变下拉菜单的显示方向，在ie下没发现此效果。整体...
使用RecyclerView写树形结构的TreeRecyclerView
郑海波(莫川)的CSDN博客
06-25 8170
简介android是不提供树形控件的，如果需要使用树形控件，我们应该怎么做呢？ 先看效果 上图是一个明显的树形结构实现原理在逻辑上，它们是包含关系，数据结构上是多叉树，这是毋庸置疑的。但是，显示的时候，我们有必要嵌套ListView或RecyclerView吗？当然没有必要！ 每一而Item，在显示的时候，都是平级的，只是它们marginLeft不同而已。 更新marginLeft来体现它们
javascript 简单导航菜单设计
男儿当自强
10-25 1274
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here a:LINK { text-decoration: none; } ul{list-style: none;} li{float: left} function o
javascript基础（二级菜单练习）（四十六）
余正源的博客
02-16 765
1html代码： 二级菜单 * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; text-decoration: none; } body { font: 12px/180% Arial,
JS案例：简单的多级菜单实现
02-28 1906
代码附上： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp
html js二级列表,JS实现多级下拉列表框
weixin_29767975的博客
06-27 638
一、编写HTML二、编写CSS.disabled-div {display : none;}#hm-select-div input {width : 176px;height: 30px;border-radius: 3px;float:left;display:block;padding:6px 12px;font-size: 14px;line-height: 1.42854143;outl...
javascript实现下拉菜单效果
03-29
以下是一个简单的HTML和JavaScript代码示例，用于实现下拉菜单效果： HTML代码： ``` ()" class="dropbtn">下拉菜单 选项1 选项2 选项3 ``` CSS代码： ``` /* 下拉菜单按钮样式 */ .dropbtn { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值