<!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. bzoj 1854 构图 并查集

    我们可以把一件装备看成一条边,两个属性看成两个点,那么这就相当于读入了一张图 当读入每一个x,y时,我们找到两个点的祖先节点,fx,fy,我们保证祖先节点在该连通块 中编号(装备属性)最大,用flag ...

  2. 数据库 update select 多列操作

    最常用的update语法是:  UPDATE <table_name>  SET <column_name1> = <value>, SET <column_ ...

  3. bzoj2594

    题解: lct维护最小生成树 首先,先对于每一条边,生成一个点,这个点连接这一条边的两个端点 点的值为边的权值 其他点的权值都是0 那么每一次查找i-j路径上面最小值,就变成查找树上路径点权最小值 按 ...

  4. PLSQL 触发器

    触发器权限 数据库创建用户时想要在本用户下使用触发器,需要给用户触发器的权限 使用DBA用户执行  GRANT CREATE TRIGGER TO user_name; 如果想在当前用户下创建其他用户 ...

  5. Linux:关于设置PS1提示符输入长命令格式出现的问题及解决

    关于设置PS1提示符命令输出格式出现的问题解决 正确的格式 \[\e[;;32m\]xxxx #如果只是改变提示符而不改变命令,在后面加一个结束符. \[\e[;;32m\]xxxx \[\e[0m ...

  6. CMake与Make

    大家都知道,写程序大体步骤为: 1.用编辑器编写源代码,如.c文件. 2.用编译器编译代码生成目标文件,如.o. 3.用链接器连接目标代码生成可执行文件,如.exe. 但如果源文件太多,一个一个编译时 ...

  7. 走在linux 的路上

    终于现在不看鸟哥的私房菜基础篇了,以后再慢慢看,像我这种初学者,感觉还是不太适合看鸟哥的私房菜. 于是从图书馆借了本书继续学习我的linux. 这样看着linux容易多了,进而熟悉了几个命令:ls c ...

  8. 基于zookeeper简单实现分布式锁

    https://blog.csdn.net/desilting/article/details/41280869 这里利用zookeeper的EPHEMERAL_SEQUENTIAL类型节点及watc ...

  9. 51Nod 1049：最大子段和（dp）

    1049 最大子段和  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 N个整数组成的序列a[1],a[2],a[3],-,a[n],求该序列如a[i]+ ...

  10. PowerDesigner15.1使用技巧总结

    1.  生成sql脚本 Database→Generate Database 选择要输出的文件路径,即文件存储路径,并根据需要修改文件名,单击确定后便会生成sql脚本.   在Options选项卡里, ...