<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .item .header{

            height: 35px;

            background-color: #2459a2;

            color: white;

            line-height: 35px;

        }

    </style>

</head>

<body>

    <div style="height: 48px"></div>

    <div style="width: 300px">

        <div class="item">

            <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单1</div>

            <div class="content">

                <div>内容1</div>

                <div>内容1</div>

                <div>内容1</div>

            </div>

        </div>

        <div class="item">

            <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单2</div>

            <div class="content hide">

                <div>内容2</div>

                <div>内容2</div>

                <div>内容2</div>

            </div>

        </div>

        <div class="item">

            <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单3</div>

            <div class="content hide">

                <div>内容3</div>

                <div>内容3</div>

                <div>内容3</div>

            </div>

        </div>

        <div class="item">

            <div id='i4' class="header" onclick="ChangeMenu('i4');">菜单4</div>

            <div class="content hide">

                <div>内容4</div>

                <div>内容4</div>

                <div>内容4</div>

            </div>

        </div>

    </div>

    <script>

        function ChangeMenu(nid){

            var current_header = document.getElementById(nid);

            var item_list = current_header.parentElement.parentElement.children;

            for(var i=0;i<item_list.length;i++){

                var current_item = item_list[i];

                current_item.children[1].classList.add('hide');

            }

            current_header.nextElementSibling.classList.remove('hide');

        }

    </script>

</body>

</html>

JS及Dom示例 | 分级菜单折叠的更多相关文章

  1. jQuery示例 | 分级菜单

    <!DOCTYPE html> Title .header{ background-color: black; color: wheat; } .content{ min-height: ...

  2. 继续JS之DOM对象二

    前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...

  3. JS之DOM对象二

    前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...

  4. 前端之JavaScript：JS之DOM对象二

    继续JS之DOM对象二 前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement(' ...

  5. 基于react实现无限分级菜单

    在开发CMS(内容管理系统)系统时,一般都会用到一个侧边栏或者顶部的二级或者三级菜单,当点击或者鼠标悬浮时,菜单能够随之展开或收起. 本文纯粹为了练习一下react,因此我会在react环境下实现这么 ...

  6. jq菜单折叠效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. python学习笔记十三 JS，Dom（进阶篇）

    JS介绍 JavaScript 是属于网络的脚本语言!JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用:JavaScript 是因特网上最流 ...

  8. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...

  9. 前端之JavaScript：JS之DOM对象三

    js之DOM对象三   一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for ...

随机推荐

  1. 编写高质量代码改善C#程序的157个建议——建议72：在线程同步中使用信号量

    建议72:在线程同步中使用信号量 所谓线程同步,就是多个线程在某个对象上执行等待(也可理解为锁定该对象),直到该对象被解除锁定.C#中对象的类型分为引用类型和值类型.CLR在这两种类型上的等待是不一样 ...

  2. C#函数式程序设计之惰性列表工具——迭代器

    有效地处理数据时当今程序设计语言和框架的一个任务..NET拥有一个精心构建的集合类系统,它利用迭代器的功能实现对数据的顺序访问. 惰性枚举是一个迭代方法,其核心思想是只在需要的时候才去读取数据.这个思 ...

  3. 利用APT实现Android编译时注解

    摘要: 一.APT概述 我们在前面的java注解详解一文中已经讲过,可以在运行时利用反射机制运行处理注解.其实,我们还可以在编译时处理注解,这就是不得不说官方为我们提供的注解处理工具APT (Anno ...

  4. python 爬虫登录保存会话去获取只有登录能获取的数据

    #!/usr/bin/env python # -*- coding: utf-8 -*- # import ConfigParser import datetime import sys impor ...

  5. IO--RAID

    RAID IO计算 Raid 0 –每个磁盘的I/O计算= (读+写) /磁盘个数 Raid 1 --每个磁盘的I/O计算= [读+(2*写)]/2 Raid 5 --每个磁盘的I/O计算= [读+( ...

  6. putty连接fedora

    putty提示“Connection refused” 但可以ping通 经查,解决方法如下: 首先判断是否安装ssh rpm -qa openssh rpm -qa openssh-server 之 ...

  7. Spring Boot - Spring Scheduling

    有时应用需要定时(如凌晨)执行一些任务(比如计算一些数据并存下来留给后续使用) 使用 使用@EnableScheduling注解启用Scheduling功能:不一定要标注在启动类上,也可以标注在@Co ...

  8. django LookUp

    Custom Lookups 一个简单LookUp例子 Author.objects.filter(name__ne='Jack') # Translate SQL "author" ...

  9. jmeter处理json（关联）

    例:用户需要登录成功后才可进行充值,进行充值操作时需要获取登录成功返回的sign值,在jmeter中可以通过关联的方式进行处理. jmeter中json path插件的使用方法:http://www. ...

  10. php中数组模拟队列、栈的函数以及数组指针操作

    1,数组指针,current表示当前指针,输出其指向的元素:next表示指针移动到下一个元素:prev指针移动到上一个元素:end表示指针移动到最后一个元素:reset表示指针移动到第一个元素: &l ...