js学习总结----案例之多级菜单js版本

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;padding:0;font-size:14px;}ul,li{list-style:none;}.box{margin:10px;padding:10px;width:300px;border:1px dashed #008000;/*渐进增强:首先设置一个纯色的背景，对于不兼容css3的浏览器来说会使用纯色，对于兼容的浏览器，我们在下面在额外的增加一些渐变色，这样会覆盖掉上面*/background:#ffe470;background:-webkit-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);background:-moz-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);background:-o-linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);background:linear-gradient(top left,#2b93d2,#fa5889,#cde074,#ffe470);}.box li{position:relative;line-height:30px;}.box em{position:absolute;top:7px;left:0;width:16px;height:16px;background:url("img/icon.png") no-repeat -59px -28px;cursor:pointer;}.box span{display:block;padding-left:20px;}.box em.open{background-position:-42px -28px;}.box .two{margin-left:20px;}.box .three{margin-left:40px;}.box .four{margin-left:60px;}.box .two,.box .three,.box .four{display:none;}</style>
</head>
<body><div class='box' id='box'><ul><li><em></em><span>第一级第一个</span><ul class='two'><li><span>第二级第一个</span></li><li><em></em><span>第二级第二个</span><ul class='three'><li><span>第三极第一个</span></li><li><span>第三极第二个</span></li><li><em></em><span>第三极第三个</span><ul class='four'><li><span>第四级第一个</span></li><li><span>第四级第二个</span></li><li><span>第四级第三个</span></li></ul></li></ul></li><li><em></em><span>第二级第三个</span><ul class='three'><li><span>第三级第一个</span></li><li><span>第三级第二个</span></li><li><span>第三级第三个</span></li></ul></li></ul></li></ul><ul><li><em></em><span>第一级第一个</span><ul class='two'><li><span>第二级第一个</span></li><li><em></em><span>第二级第二个</span><ul class='three'><li><span>第三极第一个</span></li><li><span>第三极第二个</span></li><li><em></em><span>第三极第三个</span><ul class='four'><li><span>第四级第一个</span></li><li><span>第四级第二个</span></li><li><span>第四级第三个</span></li></ul></li></ul></li><li><em></em><span>第二级第三个</span><ul class='three'><li><span>第三级第一个</span></li><li><span>第三级第二个</span></li><li><span>第三级第三个</span></li></ul></li></ul></li></ul></div><script>var box = document.getElementById('box');//把列表中的span(前面有em的span)设置一个 cursor:pointer的样式var spanList = box.getElementsByTagName("span");for(var i = 0;i<spanList.length;i++){var curSpan = spanList[i];var curPre = utils.prev(curSpan);if(curPre && curPre.tagName.toLowerCase()==="em"){curSpan.style.cursor = "pointer"}}//使用事件委托实现我们的操作box.onclick = function(e){e = e || window.event;var tar = e.target || e.srcElement;//只有点击的是em或者span标签，我们才进行展开收缩的操作if(/^(em|span)$/i.test(tar.tagName)){var parent = tar.parentNode;//获取父亲var firstUl = utils.children(parent,"ul")[0]//获取父亲子集中的第一个ul标签var oEm = utils.children(parent,"em")[0]if(firstUl){//如果隐藏让显示，否则让隐藏var isBlock = utils.getCss(firstUl,"display") === "block" ? true : false;if(isBlock){firstUl.style.display = "none";if(oEm){utils.removeClass(oEm,"open")}//当外层的收起，里层所有的ul都要隐藏，所有的em都要移除open样式var allUl = parent.getElementsByTagName("ul"),allEm = parent.getElementsByTagName("em");for(var i = 0;i<allUl.length;i++){allUl[i].style.display = "none";utils.removeClass(allEm[i],"open");}}else{firstUl.style.display = "block";if(oEm){utils.addClass(oEm,"open")}}}}}</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/diasa-fly/p/7230009.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/268836.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

讲讲类的实例化顺序，比如父类静态数据，构造函数，字段，子类静态数据，构造函数，字段，当 new 的时候， 他们的执行顺序

讲讲类的实例化顺序，比如父类静态数据，构造函数，字段，子类静态数据，构造函数，字段，当 new 的时候， 他们的执行顺序

此题考察的是类加载器实例化时进行的操作步骤&#xff08;加载–>连接->初始化&#xff09;。 父类静态变量、 父类静态代码块、 子类静态变量、 子类静态代码块、 父类非静态变量&#xff08;父类实例成员变量&#xff09;、 父类构造函数、 子类非静态变量&…
阅读更多...
转载：成功应用ERP的思路和方法分析

转载：成功应用ERP的思路和方法分析

企业ERP的应用现状一是应用数量。据我不完全统计&#xff0c;时至今日&#xff0c;全国有一万多家企业在集成应用ERP&#xff0c;这和国家统计局统计提供的266,090个国有及规模以上非国有企业的总数相比&#xff0c;仅占百分之四。二是应用时间。从1981年应用第一套ERP到2007年…
阅读更多...
mysql无法找到事件id100描述_解决“事件 ID ( 487 )的描述(在资源( Zend Optimizer )中)无法找到”...

mysql无法找到事件id100描述_解决“事件 ID ( 487 )的描述(在资源( Zend Optimizer )中)无法找到”...

事件类型: 错误事件来源: Zend Optimizer事件种类: 无事件 ID: 487日期: 2006-8-18事件: 0:17:36用户: N/A计算机: COMPUTER描述:事件 ID ( 487 )的描述(在资源( Zend Optimizer )中)无法找到。本地计算机可能没有必要的注册信息或消息 DLL 文件来从远程计算机显示消息。您可能…
阅读更多...
正则化线性回归

正则化线性回归

1. 模型的欠拟合、过拟合无论是回归问题还是分类问题都可能存在模型的欠拟合和过拟合的情况。下图是回归问题中的例子&#xff1a;第一个模型欠拟合&#xff0c;第二个模型刚好拟合&#xff0c;第三个过拟合。下图是分类问题中的例子&#xff1a;第一个模型欠拟合&#xff0c;第…
阅读更多...
用过哪些Map类，都有什么区别，HashMap是线程安全的吗,并发下使用的Map是什么，他们内部原理分别是什么，比如存储方式，hashcode，扩容，默认容量等。

用过哪些Map类，都有什么区别，HashMap是线程安全的吗,并发下使用的Map是什么，他们内部原理分别是什么，比如存储方式，hashcode，扩容，默认容量等。

JAVA Map的几种类型: HashMap、HashTable、LinkedHashMap和TreeMap。 HashMap HashMap 是一个最常用的Map&#xff0c;它根据键的HashCode值存储数据&#xff0c;根据键可以直接获取它的值&#xff0c;具有很快的访问速度。 遍历时&#xff0c;取得数据的顺序是完全随机的。 …
阅读更多...
python 线性回归回归 缺失值 忽略_python – 使用scikit-learn(sklearn),如何处理线性回归的缺失数据？...

python 线性回归回归 缺失值 忽略_python – 使用scikit-learn(sklearn),如何处理线性回归的缺失数据？...

我的数据包含2个DataFrame. DataFrame_1.shape (40,5000)和DataFrame_2.shape (40,74).我正在尝试进行某种类型的线性回归,但DataFrame_2包含NaN缺失的数据值.当我DataFrame_2.dropna(how “any”)时,形状下降到(2,74).sklearn中是否存在可以处理NaN值的线性回归算法&#xff1…
阅读更多...
vl_sift函数用法

vl_sift函数用法

1 I vl_impattern(roofs1) ; 2 image(I) ;3 %vl_sift函数的输入是一个单精度的灰度图像&#xff0c;灰度值区间归一化到[0, 255]。4 %因此图像 I 需要通过下面的函数转成相应的格式&#xff1a;5 I single(rgb2gray(I)) ;6 %vl_sift( )的输出矩阵 这里f是一个[x,y,s,th]的向量…
阅读更多...
Java面试题之有没有有顺序的Map实现类，如果有，他们是怎么实现有序的？

Java面试题之有没有有顺序的Map实现类，如果有，他们是怎么实现有序的？

Hashmap和Hashtable 都不是有序的。 TreeMap和LinkedHashmap都是有序的。&#xff08;TreeMap默认是key升序&#xff0c;LinkedHashmap默认是数据插入顺序&#xff09; TreeMap是基于比较器Comparator来实现有序的。 LinkedHashmap是基于链表来实现数据插入有序的。
阅读更多...
Photoshop的批处理（有海量的数码照片，想传上网的话就看下）

Photoshop的批处理（有海量的数码照片，想传上网的话就看下）

每次狂按快门的结果就是得到海量的数码照片&#xff0c;想传上网的话&#xff0c;最起码也要做一些尺寸方面的处理&#xff0c;这么多照片&#xff0c;真的要一张一张处理吗&#xff1f;Photoshop自有好用的Action工具帮我们做批处理。 一、前期准备 在图片所在文件夹里添加一个…
阅读更多...
Python基础-包

Python基础-包

定义&#xff1a;包本质就是一个目录&#xff08;必须带有一个__init__.py文件&#xff09;&#xff0c;它是用来从逻辑上组织模块导入包的本质&#xff1a;执行该包下的__init__.py文件导入当前目录下模块的一种方式&#xff1a;from . import module_name 其中.表示当前目录…
阅读更多...
mysql试题错误记录字段_MySQL这三道常见的面试题，你有被问过吗？

mysql试题错误记录字段_MySQL这三道常见的面试题，你有被问过吗？

据群友面试反馈&#xff0c;整理了3道MySQL面试题&#xff0c;对很多人可能是小菜一碟&#xff0c;对这些熟悉&#xff0c;有更好的理解的话&#xff0c;可以留言补充&#xff0c;不断完善我们的题库。MySQL查询字段区不区分大小写&#xff1f;MySQL innodb的事务与日志的实现方…
阅读更多...
面试题，反射创建类实例的三种方式是什么

面试题，反射创建类实例的三种方式是什么

1、获得Class&#xff1a;主要有三种方法&#xff1a; &#xff08;1&#xff09;Object-->getClass &#xff08;2&#xff09;任何数据类型&#xff08;包括基本的数据类型&#xff09;都有一个“静态”的class属性 &#xff08;3&#xff09;通过class类的静态方法&am…
阅读更多...
控制控制台

控制控制台

var s:string; begin AllocConsole; try Write(Type here your words and press Enter); Readln(s); ShowMessage(Format(You typed: "%s",[s])); finally FreeConsole; end; end;
阅读更多...
推荐系统中的矩阵分解演变方式

推荐系统中的矩阵分解演变方式

推荐算法主要分为基于内容的算法和协同过滤. 协同过滤的两种基本方法是基于邻居的方法(基于内容/物品的协同过滤)和隐语义模型. 矩阵分解乃是实现隐语义模型的基石.矩阵分解依据用户对物品的评分, 判断出用户和物品的隐语义向量, 然后依据用户和物品的隐语义向量来进行推荐.推荐…
阅读更多...
mysql1846错误_MySQL 错误代码:2003 idea错误：ERROR DruidDataSource:1846 - create connection error...

mysql1846错误_MySQL 错误代码:2003 idea错误：ERROR DruidDataSource:1846 - create connection error...

idea项目一启动就报错&#xff1a;20:01:13,047 ERROR DruidDataSource:1846 - create connection errorcom.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failureThe last packet sent successfully to the server was 0 milliseconds ago. The…
阅读更多...
mac刷新本地DNS缓存

mac刷新本地DNS缓存

本地连网有问题&#xff0c;刷新本地dns缓存&#xff0c;刷新DNS缓存命令 sudo killall -HUP mDNSResponder
阅读更多...
HashMap底层实现原理/HashMap与HashTable区别/HashMap与HashSet区别（转）

HashMap底层实现原理/HashMap与HashTable区别/HashMap与HashSet区别（转）

HashMap底层实现原理/HashMap与HashTable区别/HashMap与HashSet区别 文章来源&#xff1a;http://www.cnblogs.com/beatIteWeNerverGiveUp/p/5709841.html ①HashMap的工作原理 HashMap基于hashing原理&#xff0c;我们通过put()和get()方法储存和获取对象。当我们将键值对传递…
阅读更多...
Java中Class.forName和 ClassLoader.loadClass()区别

Java中Class.forName和 ClassLoader.loadClass()区别

一、类加载过程 装载&#xff1a;通过累的全限定名获取二进制字节流&#xff0c;将二进制字节流转换成方法区中的运行时数据结构&#xff0c;在内存中生成Java.lang.class对象&#xff1b; 链接&#xff1a;执行下面的校验、准备和解析步骤&#xff0c;其中解析步骤是可以选…
阅读更多...
变量在内存中的值[c][code]

变量在内存中的值[c][code]

#include <stdio.h>main() { /*%d所能输出的范围*/printf("%d \n", 0xffffffff); //%d所能输出的32位整数, 最大负整数printf("%d \n", 0x7fffffff); //%d所能输出的32位整数, 最大正整数/*单双精度浮点变量a,b,c,d在内存中的地址和内容 * …
阅读更多...
Servlet 生命周期

Servlet 生命周期

Servlet 生命周期&#xff1a;Servlet 加载--->实例化--->服务--->销毁。init&#xff08;&#xff09;&#xff1a;在Servlet的生命周期中&#xff0c;仅执行一次init()方法。它是在服务器装入Servlet时执行的&#xff0c;负责初始化Servlet对象。可以配置服务器&…
阅读更多...
最新文章

Copyright @ 2022~2023