<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .menu{

             float: left;width: 30%;height: 500px;background-color: antiquewhite;

         }

         .content{

             float: left;width: 70%;height: 500px;background-color: blue;

         }

         .title{

             background-color: black;

             color: white;

             height: 50px;

             line-height: 50px;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

 <div>

     <div class="menu">

         <div class="item">

             <div class="title" onclick="Func(this);">菜单一</div>

             <div class="body ">

                 <div>1.1</div>

                 <div>1.2</div>

                 <div>1.3</div>

             </div>

         </div>

         <div class="item">

              <div class="title"onclick="Func(this);">菜单二</div>

              <div class="body hide">

                   <div>2.1</div>

                   <div>2.2</div>

                   <div>2.3</div>

              </div>

         </div>

         <div class="item">

              <div class="title"onclick="Func(this);">菜单三</div>

              <div class="body hide">

                   <div>3.1</div>

                   <div>3.2</div>

                   <div>3.3</div>

              </div>

         </div>

     </div>

     <div class="content"></div>

 </div>

 <script src="jquery-3.2.1.js"></script>

 <script>

     function Func(ths) {

         console.log($(ths).text());

         $(ths).next().removeClass('hide');

         $(ths).parent().siblings().find('.body').addClass('hide');

     }

 </script>

 </body>

 </html>

JQuery之左侧菜单的更多相关文章

  1. python : jquery实现左侧菜单

    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  2. jquery实现左侧菜单 效果

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  3. jquery左侧菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

    关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...

  5. jquery实现全选，取消，反选的功能&实现左侧菜单

    1.全选,取消,反选的例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. 使用layui-tree美化左侧菜单，点击生成tab选项

    layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...

  7. LayUI左侧菜单无法保持选中状态

    1.问题描述:一般的左侧菜单都会是动态添加的模块,利用循环把模块名和链接地址逐个显示出来如下图 但是问题来了,只要点任何二级菜单就不会保持左侧菜单当前一级菜单和二级菜单选中状态. 2.分析原因:因为模 ...

  8. 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  9. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...

随机推荐

  1. 积分从入门到放弃<2>

    这部分重新从定积分学了 1,lnx 的导数就是x^(-1) = 1/x 那么求∫(1/x)dx = ln|x|+C  2,初值问题.就是求∫f(x)dx = F(x) + C 求C . 3,Houdi ...

  2. LwIP Application Developers Manual11---Initializing lwIP

    1.前言 2.Initialization for simple lwIP 查看doc/rawapi.txt来获得更多官方信息 #if NO_SYS /* Network interface vari ...

  3. k64 datasheet学习笔记45---10/100-Mbps Ethernet MAC(ENET)之功能描述

    1.前言 本文是对K64 datasheet 之ENET部分的功能描述,将对每个部分进行详细说明 2.Ethernet MAC frame formats MAC帧组成格式 (1)7字节前导码:如按最 ...

  4. u3d常用代码小集合

    01.基本碰撞检测代码 function OnCollisionEnter(theCollision : Collision){ if(theCollision.gameObject.name == ...

  5. salt使用技巧

    实时截获任务输出   __salt__['event.send']("module_send_event", {'message': message, 'jid': jid},   ...

  6. linux中模糊查找文件

    1.在当前目录下搜索指定文件: find . -name test.txt 2.在当前目录下模糊搜索文件: find . -name '*.txt' 3.在当前目录下搜索特定属性的文件: find . ...

  7. Excel 2013 表格自用技巧

    参考 Excel表格的基本操作(精选36个技巧) Excel2013基本用法 关于VLOOKUP函数 目录 快速复制单元格 单元格内强制换行 锁定标题行 查找重复值 万元显示 单元格中显示001 按月 ...

  8. [WebRTC/JsSIP] AUDIO RTP REPORTS ERROR: [Remote Address Error!]

    问题描述: 在使用FreeSWITCH WebRTC 测试时,FS回复  502 Bad Gateway.查看FS日志 [DEBUG] switch_core_media.c:5147 AUDIO R ...

  9. 【原创】测试基础之http_load（1）简介、安装、使用

    http_load-09Mar2016官方:https://acme.com/software/http_load/ 一 简介 http_load - multiprocessing http tes ...

  10. 【原创】大数据基础之Benchmark（1）HiBench

    HiBench 7官方:https://github.com/intel-hadoop/HiBench 一 简介 HiBench is a big data benchmark suite that ...