文档章节

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

木子jd
 木子jd
发布于 2016/12/02 16:45
字数 209
阅读 55
收藏 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
广州
程序员
私信 提问
加载中
请先登录后再评论。
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
6.1K
18
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.3K
1
iOS 应用版本更新检查--Harpy

实现 app 版本检查功能。用户打开app之后,进行app的版本更新检查。如果检查到 appstore 上有当前qpp的新版本,则弹出对话框提醒用户下载。可以设置让用户选择下载或者强制用户下载。 [Code4...

匿名
2013/02/18
1.8K
0
DAAttributedStringUtils

DAAttributedStringUtils 包含 NSAttributedStrings 的一些常用方法,包括: 使用类 printf 的格式化方法创建 NSAttributedString 实例 一个简单的 UI Label 类用来显示 NSAttributedString...

匿名
2013/02/18
231
0
Flash 皮肤样式--Windows8UIStyle

Windows8UIStyle 模仿 Windows 8 的桌面用户界面,使得 FlashSwing 应用程序在 Windows 8 系统中拥有与传统应用程序一致的用户界面。 Windows8UIStyle 对 FlashSwing 默认主题的修改: 提供和...

Gregary
2013/02/19
1.3K
1

没有更多内容

加载失败,请刷新页面

加载更多

倒计时一周,HOLOS千人大会即将召开!

8月10日消息,Holos霍洛斯星际云自由能源将于2020年8月17日在深圳召开千人媒体发布会。据了解,此次发布会将请到众多行业领袖、区块链技术精英、数十位国家级专科院士以及多位能源行业重量级...

osc_njd5t1rw
45分钟前
17
0
Goroutine 泄露排查

我们在发布一个 go 应用时,默认都会启用两个 http handler: 一个是 pprof,方便线上动态追踪问题;另外一个是 prometheus 的 metrics,这样就可以通过 grafana 准实时的监控当前 runtime 信...

ms2008
2019/06/03
6
0
如何在Python中打印到stderr? - How to print to stderr in Python?

问题: There are several ways to write to stderr: 有几种写stderr的方法: # Note: this first one does not work in Python 3print >> sys.stderr, "spam"sys.stderr.write("spam\n")......

法国红酒甜
47分钟前
27
0
关于JWT Token 自动续期的解决方案

前言 在前后端分离的开发模式下,前端用户登录成功后后端服务会给用户颁发一个jwt token。前端(如vue)在接收到jwt token后会将token存储到LocalStorage中。 后续每次请求都会将此token放在请...

飘渺Jam
07/16
20
0
5G时代会不会导致编程语言大灭绝,JS的前景是否会更好-诺禾

首先,5G打开了工业互联网的大门,同时5G也会推动一系列技术的发展,包括物联网、大数据、边缘计算、人工智能等等,而这些技术的发展又会推动各种技术平台的发展,从而形成以技术平台为基础来...

osc_jo2m8l1r
47分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部