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 自适应布局:视图尺寸 什么是 ...
随机推荐
- c/c++ 图相关的函数(二维数组法）
c/c++ 图相关的函数(二维数组法) 遍历图 插入顶点 添加顶点间的线 删除顶点 删除顶点间的线 摧毁图 取得与v顶点有连线的第一个顶点 取得与v1顶点,v1顶点之后的v2顶点的之后的有连线的第一个 ...
- Microsoft SQL Server sa 账户 登录错误18456
分析:在安装Sql server 2012的时候,服务器身份验证没有选择“SQL Server 和 Windows身份验证模式(S)”,导致SQL Server身份验证方式被禁用. 操作: 以Wind ...
- MATLAB简易画图2—普通直角坐标系
MATLAB简易画图2—普通直角坐标系 本人的MATLAB版本为: 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 继续在“MATLAB简易画图”这篇随 ...
- Java断言(Assertion)
断言(Assertion)是Java中一条语句,包含一个布尔表达式,当该布尔值为真,程序则被认为是正确的:当布尔值为假,则系统会抛出错误. 断言默认禁用的,在开发时候可开启功能,有利于纠正错误,增加可 ...
- C. Ayoub and Lost Array cf dp
C. Ayoub and Lost Array time limit per test 1 second memory limit per test 256 megabytes input stand ...
- 「2017 山东一轮集训 Day5」苹果树
「2017 山东一轮集训 Day5」苹果树 \(n\leq 40\) 折半搜索+矩阵树定理. 没有想到折半搜索. 首先我们先枚举\(k\)个好点,我们让它们一定没有用的.要满足这个条件就要使它只能和坏 ...
- 2883 -- 【TJOI2018】游园会
Description 小豆参加了\(NOI\)的游园会,会场上每完成一个项目就会获得一个奖章,奖章只会是\(N,O,I\)的字样.在会场.上他收集到了\(K\)个奖章组成的串.兑奖规则是奖章串和兑奖 ...
- python 逻辑判断 循环练习题
# 1.判断下列列逻辑语句句的True,False.# 1)1 > 1 or 3 < 4 or 4 > 5 and 2 > 1 and 9 > 8 or 7 < 6 ...
- 为什么java的类是单继承的，接口是多继承的
类 如果一个类继承了两个类,但是这两个类中有相同的方法,那么子类调用方法时,无法确定应该调用哪个父类的方法. [c++是多继承的] 接口 jdk1.7 接口可以多继承,是因为当接口中是抽象方法.不存 ...
- UVA116-Unidirectional TSP（动态规划基础）
Problem UVA116-Unidirectional TSP Accept: 7167 Submit: 56893Time Limit: 3000 mSec Problem Descripti ...