<!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. JavaScript学习总结——转

    JavaScript学习总结(一)——JavaScript基础 JavaScript学习总结(二)——逻辑Not运算符详解 JavaScript学习总结(三)——逻辑And运算符详解 JavaScri ...

  2. 【小梅哥FPGA进阶教程】第十一章 四通道幅频相可调DDS信号发生器

    十一.四通道幅频相可调DDS信号发生器 本文由山东大学研友袁卓贡献,特此感谢 实验目标 实现多通道可调信号发生器 实验平台 芯航线FPGA核心板.ADDA模块 实验现象 实现基于FPGA的多通道可调信 ...

  3. [LeetCode 题解]: Anagrams

    Given an array of strings, return all groups of strings that are anagrams. Note: All inputs will be ...

  4. 达梦数据库（DaMeng）如何删除IDENTITY自增属性字段

    今天工作中使用到达梦数据库,要求删除具有IDENTITY自增属性的字段. 直接执行删除:ALTER TABLE <表名> DROP COLUMN <列名> CASCADE; 删 ...

  5. 《锋利的jQuery 第二版》chapter 1~

    chapter 1 认识 jQuery jquery.js(开发版),jquery.min.js(生产版) window.onload 与 $(document).ready() 的对比: jquer ...

  6. 对比Vector、ArrayList、LinkedList区别

    Vector是Java早期提供的线程安全的动态数组.因为同步是又额外开销的,所以如果不需要线程安全,不建议选择.Vector内部用对象数组保存数据,可以根据需要自动的增加容量,当数组已满时,会创建新的 ...

  7. Elasticsearch学习(2) windows环境下Elasticsearch同步mysql数据库

    在上一章中,我们已经能够通过spring boot来使用Elasticsearch,但是由于我们习惯性的将数据写入mysql,所以为了解决这个问题,Elasticsearch为我们提供了一个插件log ...

  8. OCP 12c最新考试原题及答案（071-3）

    3.(4-10) choose the best answer:The user SCOTT who is the owner of ORDERS and ORDER_ITEMS tables iss ...

  9. Python3.6引入的f-string 与 Python 3的新的特性：类型注解；

    f-string 1.介绍 f-string(formatted string literals):格式化字符串常量,是Python3.6新引入的一种字符串格式化方法,使格式化字符串的操作更加简便. ...

  10. awk常用用法

    一. 基本使用方法: awk '{pattern + action}' filenames #其中 pattern 表示 AWK 在数据中查找的内容,而 action 是在找到匹配内容时所执行的一系列 ...