文档章节

点击菜单 弹出层隐藏及显示

木子jd
 木子jd
发布于 2016/12/02 16:45
字数 209
阅读 6
收藏 0
点赞 0
评论 0
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>菜单点击下拉框出现</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <script src="jquery-1.11.3.min.js"> </script>
    <script src="text.js"> </script>
    <style>
        .cont {
            width: 200px;
            margin: 100px 0;
            background: red;
        }
        .cont1,
        .cont2 {
            opacity: 0;
            height: 0;
        }
        
        .tab1 .cont1,
        .tab2 .cont2 {
            transition: all .5s ease;
            opacity: 1;
            height: 200px;
        }
    </style>
</head>
<body>
    <ul>
        <li ref="tab1"><a href="">tab1</a></li>
        <li ref="tab2"><a href="">tab2</a></li>
    </ul>
    <ul class="cont">
        <li class="cont1"><a href="">ocntent1</a></li>
        <li class="cont2"><a href="">ocntent2</a></li>
    </ul>
</body>
</html>

index.js
$(document).ready(function () {
    $("li").click(function (e) { 
        e.preventDefault();
        $this=$(this);
       
        $("body").removeClass().addClass($this.attr("ref"));
        
    });
});




思路:

点击菜单出现弹出层的制作窍门:
在点击的时候在 body addClass / removeClass
通过 这个Class 覆盖 弹出层的显示及隐藏
其他 弹出层同理
在父元素 + / - Class的方案
选要有动画的元素 全部 + transition: all .5s ease;

 

© 著作权归作者所有

共有 人打赏支持
木子jd
粉丝 1
博文 16
码字总数 7602
作品 0
广州
程序员
1.9 Illustrator参考线的使用 [Illustrator CC教程]

本节课将为您演示,如何使用参考线,精确的定位和捕捉对象。首先依次点击[视图 > 标尺 > 显示标尺]命令。 然后点击图层面板中的[新建图层]按钮,创建一个新的图层。您将在新图层上创建参考线...

fzhlee
04/08
0
0
Navicat Mac 虚拟组和连接颜色的作用

Navicat Mac 虚拟组旨在提供一个按类别逻辑分组对象的平台,以便使全部对象得到有效保护。Navicat Mac 提供颜色高亮显示连接以识别连接及它们的数据库对象。 Navicat Mac虚拟组 虚拟组 Navi...

Navicat数据库管理工具
2016/10/11
3
0
Altium Designer -- 精心总结

如需转载请注明出处:http://blog.csdn.net/qq_29350001/article/details/52199356 以前是使用DXP2004来画图的,后来转行。想来已经有一年半的时间没有画过了。突然转到AD,有些不适应。用了...

qq_29350001
2016/08/13
0
0
1.1 Illustrator选项卡标签的使用

本节课将为您演示选项卡标签的使用。首先依次点击[文件 > 打开]命令,弹出打开窗口,打开一份示例文件。 Illustrator互动教程-酷课堂 在弹出的[文件]菜单中,点击[打开]命令,弹出[打开]窗口...

fzhlee
04/08
0
0
ionic 学习之 上拉菜单、背景层、下拉列表

简介 这一篇是我开始学习ionic JavaScript 部分的第一篇,所以已经做好了踩坑的准备,而且可能会遇到很多不懂的地方,所以随手注释,笔记会凌乱些。而且此前没有学angularjs,所以也会补充些...

邪人君子
01/14
0
0
JS_stopPropagation, preventDefault 和 return false

因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagation(), prevent...

喵王不瞌睡
2014/12/07
0
0
1.4 Illustrator的三种屏幕模式

本节课将为您演示系统的三种屏幕模式,您可以根据工作需要,选择合适的屏幕模式。当前的屏幕模式为正常屏幕模式。点击工具箱最下方的[更改屏幕模式]按钮。 在弹出的选项列表中,选择[带有菜单...

fzhlee
04/08
0
0
1.8 Illustrator标尺的使用 [Illustrator CC教程]

在设计过程中会经常使用标尺对设计版式、内容进行精确的定位。在默认状态下,系统不显示标尺。依次点击[视图 > 标尺 > 显示标尺]命令。 点击[显示标尺]命令,将显示水平标尺和垂直标尺。 接着...

fzhlee
04/08
0
0
Android中的Menu功能菜单-OptionsMenu[选项菜单]

Android中的菜单是用户界面中最常见的元素,使用也很频繁,在Android中,菜单被分为3种,分别为选项菜单(OptionsMenu)、上下文菜单(ContextMenu)、子菜单(SubMenu)。本文先讲选项菜单(Option...

鉴客
2011/11/14
2.2K
0
黄秀杰/WXDropDownMenu

先来看下效果图: 思路与步骤: 布局方面,整体使用dl来写,二级包在dd中,用ul li来写;交互方面,点击某一级菜单,关闭兄弟子菜单,点击某子菜单关闭所有菜单。 1.使用dt做出第一级菜单 2....

黄秀杰
2016/10/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

python以太坊类库web3.py概览

python通过web3.py库与以太坊交互共同入口是web3对象。web3对象提供API接口,python开发应用与以太坊进行交互如钱包创建、支付、转账等连接JSON-RPC服务器进行。 Providers提供者 Providers使...

智能合约
7分钟前
0
0
【Android学习笔记】设置App启动页

先将启动页放到项目资源中,图片一般是1080*1920的jpg。 新建一个activity,如图: 创建成功之后,打开刚刚创建的activity,来进行代码的编写: >>>阅读全文

全部原谅
8分钟前
0
0
什么是React-redux、为什么使用React-redux、怎么使用React-redux

1、什么是React-redux React-redux是用于连接React和Redux的 2、为什么使用React-redux 使用React-redux可以使redux部分代码更简洁更明了,比如组建中需要使用到的数据都在mapStateToProps方...

kimyeongnam
10分钟前
0
0
Spring核心——Stereotype组件与Bean扫描

在注解自动装载中介绍了通过注解(Annotation)自动向Bean中注入其他Bean的方法,本篇将介绍通过注解(Annotation)向容器添加Bean的方法。 Spring的核心容器提供了@Component和@Bean注解来标...

随风溜达的向日葵
11分钟前
0
0
利用世界杯,读懂 Python 装饰器

Python 装饰器是在面试过程高频被问到的问题,装饰器也是一个非常好用的特性, 熟练掌握装饰器会让你的编程思路更加宽广,程序也更加 pythonic。 今天就结合最近的世界杯带大家理解下装饰器。...

猫咪编程
14分钟前
0
0
flink fold example

flink fold例子 import org.apache.flink.api.common.functions.*;import org.apache.flink.streaming.api.datastream.DataStream;import org.apache.flink.streaming.api.environment.S......

coord
15分钟前
0
0
c++ qt 组播总结

每个人都有不同的认知规律和习惯, 有的人喜欢搞一套严密的大理论, 论述起来滔滔不绝, 不管自己懂不懂, 反正读者/听者是没搞懂。 有的人喜欢从实践出发, 没看到代码, 不运行一下, 不看...

backtrackx
20分钟前
0
0
Sublime text2安装json格式化插件SublimePrettyJson[Windows]

一、下载SublimePrettyJson插件包 https://github.com/dzhibas/SublimePrettyJson 二、将下载的文件解压放到在package目录下面 C:\Users\lucky\AppData\Roaming\Sublime Text 3\Packages 每个......

lazy~
20分钟前
0
0
安装vue-cli 报4058错误

1. 4058是网络代理错误。 安装淘宝源修改一下就可以了: npm --registry https://registry.npm.taobao.org info underscore 改为cnpm执行: cnpm install --global vue-cli 安装成功: 试试版...

MrBoyce
21分钟前
0
0
CPU飙升分析

1、top -----看具体的进程 2、top -H -p pid ------该进程的线程 3、printf 0x%x 15248 ------将线程改为16进制 4、jstack 进程...

北极之北
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部