1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .item .header{
  11.             height: 35px;
  12.             background-color: #f25022;
  13.             color: white;
  14.             line-height: 35px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div style="height: 48px"></div>
  20.     <div style="width: 300px">
  21.         <div class="item">
  22.             <div class="header" onclick="ChangeMenu(this)">菜单1</div>
  23.             <div class="content">
  24.                 <div>内容1</div>
  25.                 <div>内容1</div>
  26.             </div>
  27.         </div>
  28.         <div class="item">
  29.             <div  class="header" onclick="ChangeMenu(this)">菜单2</div>
  30.             <div class="content hide">
  31.                 <div>内容2</div>
  32.                 <div>内容2</div>
  33.             </div>
  34.         </div>
  35.         <div class="item">
  36.             <div  class="header" onclick="ChangeMenu(this)">菜单3</div>
  37.             <div class="content hide">
  38.                 <div>内容3</div>
  39.                 <div>内容3</div>
  40.             </div>
  41.         </div>
  42.         <div class="item">
  43.             <div  class="header" onclick="ChangeMenu(this)">菜单4</div>
  44.             <div class="content hide">
  45.                 <div>内容4</div>
  46.                 <div>内容4</div>
  47.             </div>
  48.         </div>
  49.     </div>
  50.     <script>
  51.         function ChangeMenu(ths){
  52.             current_head = ths;
  53.             var all_text =current_head.parentElement.parentElement;
  54.             children_text = all_text.children;
  55.             for(var i=0; i<children_text.length; i++){
  56.                 current_text = children_text[i];
  57.  
  58.                current_text.children[1].classList.add('hide')
  59.             }
  60.  
  61.             current_head.nextElementSibling.classList.remove('hide')
  62.  
  63.         }
  64.     </script>
  65. </body>
  66. </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. python语言的优缺点

    python作为一门高级编程语言,它的诞生虽然很偶然,但是它得到程序员的喜爱却是必然之路. 龟叔给Python的定位是“优雅”.“明确”.“简单”,所以Python程序看上去总是简单易懂,初学者学Py ...

  2. 101. Symmetric Tree -- 判断树结构是否对称

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...

  3. 无法安装64位版本的office因为在您的pc

    无法安装64位版本的office因为在您的pcWindows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Installer\Products\00 ...

  4. 快速切题 sgu133.Border 离线

    133. Border time limit per test: 0.25 sec. memory limit per test: 4096 KB Along the border between s ...

  5. Alpha阶段第1周Scrum立会报告+燃尽图 01

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 ...

  6. c++的关联容器入门（map and set）

    目录 std::map std::set C++的关联容器主要是两大类map和set 我们知道谈到C++容器时,我们会说到 顺序容器(Sequence containers),关联容器(Associa ...

  7. Yii隐藏单入口

    Yii进入项目首页时默认是index.php文件路径,如何把index.php去掉,方法如下: 打开apache配置文件http.conf,找到如下的代码: #LoadModule rewrite_m ...

  8. WPF 设置TextBox为空时，背景为文字提示

    WPF 设置TextBox为空时,背景为文字提示.   <TextBox FontSize="17" Height="26" Margin="2 ...

  9. conan c&&c++ 包管理工具使用

    测试使用的是JFrog Artifactory CE 进行的私有包管理,具体的安装可以参考相关文档 启动JFrog Artifactory CE 使用docker docker run -d -p 8 ...

  10. SublimeText设置在浏览器打开 快捷键

    这里插入一下安装"view in browser"官方版的说明:(前提是得先安装package control插件) 1.通过"ctrl+shift+p"打开命 ...