<!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. elasticsearch 自定义similarity 插件开发

    转自:http://www.chepoo.com/elasticsearch-similarity-custom-plug-in-development.html 在搜索开发中,我们要修改打分机制,就 ...

  2. C# 对json对象嵌套数组

    看图: 这里可以看到是二层嵌套!!使用C#如何实现?? 思路:使用list集合实现 → 建立类 → list集合 → 微软的   Newtonsoft.Json  (一款.NET中开源的Json序列化 ...

  3. ISE创建Microblaze软核（三）

    第七步 进入SDK开发环境 编译完成后弹出如下对话框,选择SDK的工作目录.在MicroblazeTutor中创建一个Workspace文件夹,并选择该文件夹为SDK的工作目录. 进入SDK主界面. ...

  4. 在JavaScript中进行文件处理，第一部分：基础

    译注:原文是<JavaScript高级程序设计>的作者Nicholas Zakas写的,本翻译纯属为自己学习而做,仅供参考.原文链接:这里 很多年前,我在一次Goole面试被问到,如何在w ...

  5. 201621123010《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 2. 书面作业 1. clone方法 1.1 在 ...

  6. Beta阶段第2周/共2周 Scrum立会报告+燃尽图 08

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2389] 版本控制:https://git.coding.net/liuyy08 ...

  7. 前端imageBuffer设置图片src(后端到前端直传buffer)

    本质为buffer转base64 let bytes = new Uint8Array(imageBuffer.data); let data = ""; let len = by ...

  8. 【项目经验】macpro上安装office办公软件并破解

    链接: https://pan.baidu.com/s/1i5hyKO9 密码: 7zjf 如果本机原有office,先卸载 双击pkg文件安装office for Mac 2016 安装完不要做打开 ...

  9. java之美妙的注解

    注解 一.认识注解 先看百度百科对java注解的解释: 定义:注解(Annotation),也叫元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性,与类.接口.枚举是在同一个层次.它 ...

  10. List用法与介绍

     泛型的好处:它为使用c#语言编写面向对象程序增加了极大的效力和灵活性.不会强行对值类型进行装箱和拆箱,或对引用类型进行向下强制类型转换,所以性能得到提高.      性能注意事项:在决定使用ILis ...