js内嵌菜单 html,html：原生javascript+css实现折叠层级菜单

前言

今天来跟大家分享一下如何制作一个网页中的左侧菜单，这个功能对于网页来说也是常用的功能之一，相当于书签一样的功能。那么今天我们就来说一说如何实现一个折叠层级菜单的功能。

那么折叠层级菜单长什么样？下面我们来直观的看一下，如下图所示就是一个简单的层级菜单，共有四个菜单选项，选择哪一个选项就对应地菜单下面相应的内容，如下截图所示：

那么对于这样的层级菜单如何实现呢？用原生的javascript+css就可以来实现，而且实现起来也不是很难，这里主要是通过用css对菜单定义两种状态，一个用于折叠时显示，另一个用于展开时显示，而这两个状态的切换则使用JavaScript的单击响应函数来完成。在用JavaScript做状态切换时，我这里使用的是排他思想，也就当前点击的菜单是一种状态，其他的都是另一种状态，而实现排他思想的手段则是双重for循环和自定义属性。下面来看一下具体如何实现吧，具体代码如下：

折叠层级菜单

body{margin: 0;text-align: center;}

#mymenu {display: inline-block;margin:50px 100px 0 0;text-align: left;width: 23%;}

#mymenu div{overflow: hidden;border-bottom: 10px solid #fff;}

.menuspan{display: block;overflow: hidden;text-align: left;background-colo