<!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. 手把手教你如何加入到github的开源世界

    我曾经一直想加入到开源项目中,但是因为没有人指导流程,网上看了很多,基本都是说了个大概,如果你也是一个初出茅庐的人,那么,我将以自己提交的一次开源代码为例,教会你步入开源的世界. 1,首先登陆到htt ...

  2. UVALive-2531 The K-League （最大流建模+枚举）

    题目大意:有n支足球队,已知每支球队的已胜场数和任意两支球队之间还需要的比赛场数a[i][j],求最终可能夺冠的所有球队. 题目分析:枚举所有的球队,对于球队 i 让它在接下来的比赛中全部获胜,如果这 ...

  3. iOS UI-自动布局（Autoresizing）

    // // ViewController.m // IOS_0115_buzhi // // Created by ma c on 16/1/15. // Copyright (c) 2016年 博文 ...

  4. 大于号转义符&gt;---小于号转义符&lt;

    < < < 小于号 > > > 大于号 ≤ ≤ ≤ 小于等于号 ≥ ≥ ≥ 大于等于号 " " " 引号 “ “ “ 左双引号 ” ” ...

  5. 浅谈Http1.0/Http1.1/Http2.0/Https

    HTTP 1.0 → HTTP 1.1 长连接 HTTP 1.1默认支持长连接,减少了TCP连接次数,节约开销. HTTP 1.0所保持的TCP每次只能处理一个请求,最典型的就是pipline管线化模 ...

  6. [leetcode] 204. Count Primes 统计小于非负整数n的素数的个数

    题目大意 https://leetcode.com/problems/count-primes/description/ 204. Count Primes Count the number of p ...

  7. 《Java技术》预备作业总结

    Java预备作业总结 第一次的博客作业完成了,对于一种崭新的形式,大家可能还不太适应,学习和借鉴好的理念和学习方式,是我们缩小差距.提升自己的第一步. 关于你期望的师生关系 从幼儿园到大学,大家接触到 ...

  8. POJ1651 Multiplication Puzzle【区间DP】

    LINK 每次删除一个数,代价是左右两边相邻的数的当前数的积 第一个和最后一个数不能删除 问最后只剩下第一个数的最后一个数的最小代价 思路 很简单的DP 正着考虑没有办法确定两边的数 那么就把每个区间 ...

  9. android logger的使用

    1. 进入GitHub页面 https://github.com/orhanobut/logger 2. 在gradle里增加 compile 'com.orhanobut:logger:1.15' ...

  10. Minio Bucket 通知试用&&说明

    kafka 安装 docker run -p 2181:2181 -p 9092:9092 \ --name kafka --rm \ --env ADVERTISED_HOST=HOSTIP \ - ...