<!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. IOS-如何优雅地拦截按钮事件（判断是否需要登录）

    关于这个标题,起因是这样的. 最近一次做项目需求时,遇到这样一个需求,就是本来我们App是必须注册或者第三方登录才可以使用,现在希望不登录也可以浏览App里面的内容,只是在需要的时候才提示登录,并且在 ...

  2. 修复Ubuntu下XTerm不能正常显示中文字体的问题

    打开/etc/X11/app-defaults/XTerm在最后添加如下代码: Xft.dpi:96         xpdf.title: PDF         XTerm*faceSize: 1 ...

  3. BZOJ1228 [SDOI2009]E&D

    蒟蒻不会= = 话说写题解的巨巨也只会打表233 反正先A掉再说 /************************************************************** Pro ...

  4. 002PHP文件处理——文件处理 is_dir mkdir getcwd chdir rmdir

    <?php /** * 66 文件处理 is_dir mkdir getcwd chdir rmdir */ //is_dir() 判断一个目录是否存在 //var_dump(is_dir('6 ...

  5. hdu 3687 10 杭州 现场 H - National Day Parade 水题 难度:0

    H - National Day Parade Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & % ...

  6. 身份证&银行卡识别方案

    一.  调用第三方服务 腾讯云OCR识别: 实现方法:Post图片 URL到腾讯云服务器.Post图片文件 到腾讯云服务器 b.    报价: 月接口调用总量 0<调用量≤1000 1000&l ...

  7. 实现react中的自动保存--定时任务

    1. 定义和用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式. setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或 ...

  8. IO综合练习--文件切割和文件合并

    有时候一个视频文件或系统文件太大了,上传和下载可能会受到限制,这时可以用文件切割器把文件按大小切分为文件碎片, 等到要使用这个文件了,再把文件碎片合并成原来的文件即可.下面的代码实现了文件切割和文件合 ...

  9. 博客网站-Hexo+GitHub+Netlify

    Hexo+GitHub+Netlify一站式搭建属于自己的博客网站 https://www.cnblogs.com/kerbside/p/10130606.html https://hhongwen. ...

  10. Java编程之Date的相关操作

    一:讲字符串的时间格式数据转换成时间对象 //将字符串的时间数据,转换成时间 String dateString="2007-12-12"; DateFormat date=new ...