实现左侧菜单二级下拉菜单，

js 实现左侧菜单二级下拉菜单，

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>JS实现下拉菜单</title><style type="text/css">* {margin: 0px;padding: 0px;}#div1 {width: 200px;margin: 0 auto;line-height: 25px;}ul {list-style: none;}li {background: #ccc;margin-bottom: 3px;}dl {background: #eee;display: none;}.active {background: #F90;}dd:hover {background: red;}</style></head><body><div id="div1"><ul id="menu"><li class="active">菜单1</li><dl><dd>菜单1.1</dd><dd>菜单1.2</dd><dd>菜单1.3</dd><dd>菜单1.4</dd></dl><li class="active">菜单2</li><dl><dd>菜单2.1</dd><dd>菜单2.2</dd><dd>菜单2.3</dd><dd>菜单2.4</dd></dl><li class="active" onclick="on(idt)">菜单3</li><dl id="idt"><dd>菜单3.1</dd><dd>菜单3.2</dd><dd>菜单3.3</dd><dd>菜单3.4</dd></dl></ul></div></body><script type="text/javascript">var odiv1 = document.getElementById("div1");var oli = odiv1.getElementsByTagName("li");var odl = odiv1.getElementsByTagName("dl");for(var i = 0; i < oli.length; i++) {oli[i].tag = trueoli[i].index = i;oli[i].onclick = function() {//   隐藏子菜单for(var j = 0; j < oli.length; j++) {//判断当前点击的下标是否等于隐藏子菜单下标if(this.index != j) {//不等于tag = trueoli[j].tag = true}oli[j].className = '';odl[j].style.display = 'none';}this.className = "active";//判断当前点击tag是否trueif(this.tag) {odl[this.index].style.display = "block";this.tag = !this.tag;} else {odl[this.index].style.display = "none";this.tag = !this.tag;}}}</script></html>

实现左侧菜单二级下拉菜单，相关推荐

动态左侧二级下拉菜单基于bootstrap js
动态左侧二级下拉菜单 html代码: <!DOCTYPE html> <html lang="en"> <head><meta chars ...
CSS3蓝色宽屏二级下拉菜单DEMO演示
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
先上DEMO, 虽然丑,那是因为零级按钮的界面太丑了,图标也丑┑(￣Д ￣)┍ 这两个优化后会好很多,毕竟美观不是我的特长嘛 DEMO链接: http://download.csdn.net/deta ...
纯CSS3实现宽屏二级下拉菜单
今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...
动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
绑定dictionary 给定关键字不再字典中_VBA数组与字典解决方案第51讲：字典嵌套及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
绑定dictionary 给定关键字不再字典中_对字典嵌套的理解及二级下拉菜单的制作...
大家好,今日我们继续讲解VBA数组与字典解决方案,今日讲解第51讲:对字典嵌套的理解及二级下拉菜单的制作. 在讲字典的时候,我反复说明,字典看视非常简单,由于它具有直达性可以省略去我们大量的循环查找代 ...
html二级下拉菜单模板,基于jQuery实现二级下拉菜单效果
本文通过代码实例详细介绍一下简单的二级下拉菜单是如何实现的,当然还有更为复杂的二级菜单,不过先学会如何制作简单的,分享给大家供大家参考,具体内容如下代码如下: 下拉菜单 nav a{ text-de ...
android二级菜单实现,Android编程实现二级下拉菜单及快速搜索的方法
本文实例讲述了Android编程实现二级下拉菜单及快速搜索的方法.分享给大家供大家参考,具体如下: 一.我们要做什么? 上面有个搜索框,下面是一个二级下拉菜单. 输入查询内容,下面列表将显示查询结果. ...
vba下拉框实现记忆功能_VBA | 这个二级下拉菜单挺有趣！
我的目标:让中国的大学生走出校门的那一刻就已经具备这些office技能,让职场人士能高效使用office为其服务.支持我,也为自己加油! 前面章节我们讲过了表单控件和ActiveX控件的区别,知道了A ...

实现左侧菜单二级下拉菜单，

js 实现左侧菜单二级下拉菜单，

实现左侧菜单二级下拉菜单，相关推荐

最新文章

热门文章