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 自适应布局:视图尺寸 什么是 ...
随机推荐
- python + MySql 基本操作
python + mysql数据库的链接 1.安装mysql pip install PySQLdb 2.连接数据库 # -*- coding: UTF- -*- import MySQLdb # 打 ...
- LeetCode算法题-Nim Game（Java实现）
这是悦乐书的第203次更新,第213篇原创 01 看题和准备 你和你的朋友正在玩下面的Nim游戏:桌子上有一堆石头,每次你轮流去除1到3块石头. 移除最后一块石头的人将成为赢家. 你是第一个取出石块的 ...
- LeetCode算法题-Path Sum（Java实现）
这是悦乐书的第169次更新,第171篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第28题(顺位题号是112).给定二叉树和整数sum,确定树是否具有根到叶路径,使得沿路 ...
- Linux 小知识翻译 - 「SCP和SFTP」
这次想说说「SCP和SFTP」. 不管SCP还是SFTP,都是SSH的功能之一.都是使用SSH协议来传输文件的. 不用说文件内容,就是登录时的用户信息都是经过SSH加密后才传输的,所以说SCP和SFT ...
- June 1. 2018 Week 22nd Friday
What makes life dreary is the want of motive. 没有了目的,生活便暗淡无光. We all have dreams about our future, we ...
- Spring的AOP基于AspectJ的注解方式开发1
参考自黑马培训机构 创建项目,引入jar包 编写目标类,切面类并完成配置 package spring.day2_aop2; /* * 编写目标类 */ public class OrderDao { ...
- Teradata超长数据会截断
1.数据库版本 Teradata 15.10 2.测试案例: create multiset table test_stg ( col1 ) CHARACTER SET LATIN not null ...
- 关于图片的Base64编码
什么是Base64编码 Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性. base64编码就是长得像下面这样子的代 ...
- [matlab] 8.蚁群算法解决TSP问题
城市坐标数据下载 密码:07d5 求遍历这52座城市后最后回到最初城市的最短距离 %% 第9章 蚁群算法及MATLAB实现——TSP问题 % 程序9-1 %% 数据准备 % 清空环境变量 clear ...
- RS-485总线通信协议
https://blog.csdn.net/ouyangxin95/article/details/78174145 RS-485总线技术只是规定了接口的电气标准,并没有规定RS-485接口的电缆,插 ...