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 自适应布局:视图尺寸 什么是 ...
随机推荐
- GitHub-标签管理
参考博文:廖雪峰Git教程 1. 创建标签 切换到需要打标签的分支上,之后打标签 [root@mini05 zhangtest]# git branch dev * master [root@mini ...
- echarts修改上下左右的边距
grid: { top: '4%', left: '3%', right: '4%', ...
- JavaScript的基本包装类型_String类型
String类型概述 String在底层字符串是以字符数组的形式保存的 var str = "Hello"; // 在底层其实就是['H','e','l','l','o'] 字符串 ...
- centos7下安装docker（17.4docker监控----prometheus）
Prometheus是一个非常优秀的监控工具.准确的说,应该是监控方案.Prometheus提供了监控数据搜集,存储,处理,可视化和告警一套完整的解决方案 Prometheus架构如盗图: 官网上的原 ...
- centos7下安装docker（15.3跨主机网络-macvlan）
除了ovrlay,docker还开发了另一个支持跨主机容器的driver:macvlan macvlan本身是linu kernel模块,其功能是允许在同一物理网卡上配置多了MAC地址,即:多个int ...
- P1451 求细胞数量（广搜）
题意:就是0把是所有细胞圈起来了.而被圈起来的是所有数字全部为一个细胞问有多少个这样的细胞.(mmp,我读半天题) 思路:广搜索.就是,0的话就不放入了,不为0的话,就进入队列,然后,再看它的4个方向 ...
- 0、原生jdbc工厂类
一.代码结构 二.JDBCFactory.java package com.test; import java.io.IOException; import java.io.InputStream; ...
- WiFi-ESP8266入门http(1)-建立服务器，直接发送网
#include <ESP8266WiFi.h> /*** 该工程可以在2.4.0版本esp8266库中运行,没在更高版本库中进行测试 ***/ const char *ssid = &q ...
- 转载 （三）surging 微服务框架使用系列之我的第一个服务（审计日志）
(三)surging 微服务框架使用系列之我的第一个服务(审计日志) 前言:前面准备了那么久的准备工作,现在终于可以开始构建我们自己的服务了.这篇博客就让我们一起构建自己的第一个服务---审计日志 ...
- Linux—日志查看（测试人员）
备注:在筛选语句后面加“--col”可以高亮显示查询结果中的关键字 cd /home/admin/logs/服务器名 #进入日志目录(错误日志文件:common-error.log),路径因公司而定 ...