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 自适应布局:视图尺寸 什么是 ...
随机推荐
- 排序算法之希尔排序的思想以及Java实现
1 基本思想 shell排序又称之为缩小增量排序,基本思想是,先将待排序序列分割成若干个特殊的子表,分别进行插入排序,当整个表中元素"基本有序"时,再对全体记录进行一次直接插入排序 ...
- java基础学习总结——equals方法
一.equals方法介绍 1.1.通过下面的例子掌握equals的用法 package cn.galc.test; public class TestEquals { public static vo ...
- C# -- HttpWebRequest 和 HttpWebResponse 的使用
C# -- HttpWebRequest 和 HttpWebResponse 的使用 结合使用HttpWebRequest 和 HttpWebResponse,来判断一个网页地址是否可以正常访问. 1 ...
- LeetCode算法题-Number of Segments in a String（Java实现）
这是悦乐书的第226次更新,第239篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第93题(顺位题号是434).计算字符串中的段数,其中段定义为非空格字符的连续序列.请注 ...
- C++ 中operator用法：隐式类型转换
[转]C++ operator两种用法 C++,有时它的确是个耐玩的东东,就比如operator,它有两种用法,一种是operator overloading(操作符重载),一种是operator c ...
- Spring的AOP开发的相关术语
转载自 https://www.cnblogs.com/ltfxy/p/9873618.html SpringAOP简介: AOP思想最早是由AOP联盟组织提出的.Spring使用这种思想最好的框架. ...
- nginx: [emerg] unknown directive "stub_status" in /usr/local/openresty/nginx/conf/conf.d/ngx_metric.conf:19
问题分析 Nginx没有添加modules/ngx_http_stub_status_module.o模块. 问题解决 没有安装的话,可以在tar包安装编译的时候添加如下参数: # ./configu ...
- 使用Docker在本地搭建Hadoop分布式集群
学习Hadoop集群环境搭建是Hadoop入门必经之路.搭建分布式集群通常有两个办法: 要么找多台机器来部署(常常找不到机器) 或者在本地开多个虚拟机(开销很大,对宿主机器性能要求高,光是安装多个虚拟 ...
- 「AHOI / HNOI2017」影魔
「AHOI / HNOI2017」影魔 题目描述 解决这类比较复杂的区间贡献问题关键在于找到计算的对象. 比如这道题,我们计算的对象就是区间中间的最大值. 对于点\(i\),我们找到左边第一个比他大的 ...
- linux学习笔记整理（四）
第五章 Vim编辑器和恢复ext4下误删除的文件-Xmanager工具本节所讲内容:5.1 vim的使用5.2 实战:恢复ext4文件系统下误删除的文件5.3 实战:使用xmanager等远程连接工具 ...