<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .item .header{

            height: 35px;

            background-color: #f25022;

            color: white;

            line-height: 35px;

        }

    </style>

</head>

<body>

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

    <div style="width: 300px">

        <div class="item">

            <div class="header" onclick="ChangeMenu(this)">菜单1</div>

            <div class="content">

                <div>内容1</div>

                <div>内容1</div>

            </div>

        </div>

        <div class="item">

            <div  class="header" onclick="ChangeMenu(this)">菜单2</div>

            <div class="content hide">

                <div>内容2</div>

                <div>内容2</div>

            </div>

        </div>

        <div class="item">

            <div  class="header" onclick="ChangeMenu(this)">菜单3</div>

            <div class="content hide">

                <div>内容3</div>

                <div>内容3</div>

            </div>

        </div>

        <div class="item">

            <div  class="header" onclick="ChangeMenu(this)">菜单4</div>

            <div class="content hide">

                <div>内容4</div>

                <div>内容4</div>

            </div>

        </div>

    </div>

    <script>

        function ChangeMenu(ths){

            current_head = ths;

            var all_text =current_head.parentElement.parentElement;

            children_text = all_text.children;

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

                current_text = children_text[i];

               current_text.children[1].classList.add('hide')

            }

            current_head.nextElementSibling.classList.remove('hide')

        }

    </script>

</body>

</html>

下拉菜单的实现classList.add() classList.remove() class属性的添加和删除的更多相关文章

  1. select 下拉菜单Option对象使用add(elements,index)方法动态添加

    原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...

  2. Bootstrap3系列：下拉菜单

    1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...

  3. 制作下拉菜单(PopupList)

    怎样判断是否应当使用下拉菜单 下拉菜单,就是将一系列的选项隐藏,通过单击某一个控件将会弹出一个包含这些选项的列表,在其中选择想要的选项.这样做不但可以节省屏幕空间,也可以让用户在进行选择时更加方便快捷 ...

  4. Bootstrap入门（八）组件2：下拉菜单

    Bootstrap入门(八)组件2:下拉菜单   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) <link ...

  5. JS实现下拉菜单的功能

    <!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title> ...

  6. js （单个的）点击式下拉菜单

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

  7. [deviceone开发]-多种样式下拉菜单demo

    一.简介 该demo主要展示了3种下拉菜单. 一.仿QQ弹出菜单 主要实现原理是通过add一个ui,然后通过点击事件控制其visible属性来显示或者隐藏. 二.组合下拉菜单 主要用到的控件是do_A ...

  8. OAF_开发系列07_实现OAF下拉菜单的上下联动Poplist Synchor（案例）

    20150706 Created By BaoXinjian

  9. 从下拉菜单拖拽一个元素 出来，插入到页面中的app 列表中

    1,实现功能:从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中 并实现app向后移动一个元素的位置: 2.实现思路: 01.遍历下拉菜单,添加拖拽方法,实现位置移动功能: 02.遍历app列 ...

随机推荐

  1. mysqli使用记录

    1.批量插入数据insert 方式一:insert into tableName (id,name,age) values ('1','张三','12'),('2','李四','16'),('3',' ...

  2. 升级安装windows8.1以后windowsphone8不能启动虚拟机的办法

    如果之前在的虚拟机是OK的话,VS2012需要安装update3补丁才可以. 下载地址:http://download.microsoft.com/download/D/4/8/D48D1AC2-A2 ...

  3. U盘安装linix

    首先制作u盘启动器. 然后在电脑上使用UltraISO将你的安装的linix系统刻录到u盘上 在放入一份linix系统在u盘更目录 boot页面u盘启动.选择 第二次没有放入系统在u盘根目录出现这个: ...

  4. PostgreSQL锁级别及什么操作获取什么锁

    表级锁 大多数的表级锁是由内置的 SQL 命令获得的,但他们也可以通过锁命令来明确获取.可使用的表级锁包括: 访问共享(ACCESS SHARE) - SELECT 命令可在查询中引用的表上获得该锁. ...

  5. 6.4-6.5 使用form表单验证，完善登录页面

    之前是使用自定义的类来实现登录逻辑,现在使用django内置的form表单验证,用继承django的view来实现登录页面. users > views.py 的内容是: from django ...

  6. opencv之读取pts文件

    #include <iostream> #include <fstream> #include <opencv2/opencv.hpp> using namespa ...

  7. 笔记本电脑CPU低压、标压、高压的区别

    一.笔记本CPU型号后面有通常“U”,“M”等字样,而“U”是低压的意思,“M”是标压的意思. 1.低压U:功耗低.发热低,性能不足 2.标压M:功耗高.发热高.性能高 二.选购技巧 笔记本电脑CPU ...

  8. Android中关于JNI 的学习（一）对于JNIEnv的一些认识

    一个简单的样例让我们初步地了解JNI的作用.可是关于JNI中的一些概念还是需要了解清楚,才干够更好的去利用它来实现我们想要做的事情. 那么C++和Java之间的是怎样通过JNI来进行互相调用的呢? 我 ...

  9. PostgreSQL性能极限

    目前已有很多PostgreSQL的系统在实际生产环境下管理着超过4TB的数据.一些PostgreSQL系统的极限值如下表所列: 极限值: 最大单个数据库大小 不限 最大数据单表大小 32 TB 单条记 ...

  10. [LeetCode系列] 跳跃问题II

    给定一系列非负整数, 每个值代表从此下标可以向前跳跃的最远距离, 试求出跳跃到数组尾端需要的最少步骤. 如给定 [2,3,1,1,4], 返回2. (从下标0跳到1, 从1跳到下标4). 算法描述: ...