JS_左边栏菜单
需求:
要求实现左边栏菜单点击一下就弹开,其他的隐藏.再点击一下就隐藏.
最多只能有一个菜单的详细内容会显示出来.
三个菜单实现联动效果.
代码如下:
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta http-equiv="content-Type" charset="UTF-8">
5 <meta http-equiv="x-ua-compatible" content="IE=edge">
6 <title>左边栏菜单</title>
7 <style>
8 .menu {
9 width: 100px;
10 border: 1px solid darkgrey;
11 }
12 .item-title {
13 height: 30px;
14 line-height: 30px;
15 background-color: #449900;
16 color: white;
17 text-align: center;
18 border-bottom: 1px dotted darkgrey;
19 }
20 .hide {
21 display: none;
22 }
23 </style>
24 </head>
25 <body>
26
27 <div class="menu">
28 <div class="item">
29 <div class="item-title">菜单一</div>
30 <div class="item-body hide">
31 <div>内容1</div>
32 <div>内容2</div>
33 <div>内容3</div>
34 </div>
35 </div>
36 <div class="item">
37 <div class="item-title">菜单二</div>
38 <div class="item-body hide">
39 <div>内容1</div>
40 <div>内容2</div>
41 <div>内容3</div>
42 </div>
43 </div>
44 <div class="item">
45 <div class="item-title">菜单三</div>
46 <div class="item-body hide">
47 <div>内容1</div>
48 <div>内容2</div>
49 <div>内容3</div>
50 </div>
51 </div>
52 </div>
53 <script src="jquery-3.3.1.min.js"></script>
54
55
56 <script>
57 var $titleEles = $(".item-title");
58 for (var i=0;i<$titleEles.length;i++){
59 $titleEles[i].onclick=function () {
60 console.log(this); $(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");
61 }
62 }
63
64 </script>
65 </body>
66 </html>
JS_左边栏菜单的更多相关文章
- 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects
今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...
- CSS3超酷移动手机滑动隐藏側边栏菜单特效
这是一组共4种效果很炫酷的CSS3移动手机滑动隐藏側边栏菜单特效. 这四种效果各自是:默认的点击滑动側边栏菜单效果.带3D transforms的滑动側边栏效果.文字缩放和淡入淡出效果的滑动側边栏以及 ...
- ionic 侧栏菜单用法
第一步: 引入js和css文件我这里是直接引入的cdn,ionic是基于angular的,bundle.min.js把常用angular的js已经压缩到一起,可以直接引入.bundle.min.js, ...
- 仿XP系统的任务栏菜单
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- Ionic Js十七：侧栏菜单
一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示:   用法 要使用侧栏菜单,添加一个父元素,一个中间内容 ,和一个或更 ...
- frameset 在 Google Chrome 中无法隐藏左边栏解决方法！
使用Frameset 框架,发现在IE下, <frameset name="mainDefine" cols="200,10,*" frameborder ...
- 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ionic js 侧栏菜单 把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容.通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换. 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素<ion ...
- 高度灵活可定制的PC布局：头部按钮、左边栏、右边栏、状态栏
什么是自适应布局 CabloyJS提供了一套布局管理器,实现自适应布局 关于自适应布局的概念,强烈建议先阅读以下两篇文章: 自适应布局:pc = mobile + pad 自适应布局:视图尺寸 什么是 ...
随机推荐
- MySQL 数据库 简单操作命令 （部分总结）
1.查看进程方式查看数据库 ps - ajx|grep mysql 2.登录 MySQL mysql -u用户名 -p密码 3.开启服务 sudo service mysql start 4.停止服务 ...
- JAVA的三个版本EE，SE，ME
1998年 SUN发布三个不同版本JAVA,分别是: Java J2EE(Java Platform,Enterprise Edition) JAVA企业版,应用为开发和部署可移植.健壮.可伸缩且安全 ...
- Java循环语句怎么用？经典排序算法见真知
Java中循环语句的使用,莫过于在排序算法中使用得最为经典. 排序算法非常的多,不过大体可以分为两种: 一种是比较排序,主要有:冒泡排序,选择排序,插入排序,归并排序,堆排序,快速排序等. 另一种是非 ...
- Linux 忘记登录密码？破解系统登陆密码
1.重启或者开启系统,在如下界面按e 进入救援系统: 2.在linux16 这一行末尾输入:rd.break,以rd.break 的方法重置密码 3.分别执行以下命令 mount -o remount ...
- LeetCode算法题-Construct Quad Tree（Java实现）
这是悦乐书的第224次更新,第237篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第91题(顺位题号是427).我们想使用四叉树来存储N×N布尔网格.网格中的每个单元格只 ...
- js判断手机系统
var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > - ...
- 【Teradata】移动空间语句
1.移动10G空间从sysdba到dbc create database td_tmp_db from sysdba as perm=10E9; give td_tmp_db to "dbc ...
- linux下的文件目录结构
linux的文件系统是采用层级式的树状目录结构,在此结构中的最上层是根目录“/”,然后在此目录下再创建其他的目录 - root,存放root用户的相关文件 - home,存放普通用户的相关文件 - b ...
- 11.redis_python
# pip install redis import redis # 1.链接数据库 key--value client = redis.StrictRedis(host='127.0.0.1', p ...
- Python中的单例模式——装饰器实现剖析
Python中单例模式的实现方法有多种,但在这些方法中属装饰器版本用的广,因为装饰器是基于面向切面编程思想来实现的,具有很高的解耦性和灵活性. 单例模式定义:具有该模式的类只能生成一个实例对象. 先将 ...