文档章节

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

木子jd
 木子jd
发布于 2016/12/02 16:45
字数 209
阅读 6
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

linux中常用标识---不定期更新

LINUX常用标识符: 1 & && | || &: 表示进程在后台运行 例如 redis-server & 不是所有后台运行都是& 比如es ./bin/elasticsearch -d es后台运行&&: 第一个命令执行成功后 才执行后面的命令...

geek土拨鼠
16分钟前
0
0
Mybatis 中$与#的区别,预防SQL注入

一直没注意Mybatis 中$与#的区别,当然也是更习惯使用#,没想到避免了SQL注入,但是由于要处理项目中安全渗透的问题,不可避免的又遇到了这个问题,特此记录一下。 首先是共同点: 在mybatis...

大雁南飞了
32分钟前
0
0
Cydia的基石:MobileSubstrate

在MAC与IOS平台上,动态库的后缀一般是dylid,而加载这些动态库的程序叫做dynamic linker(dyld)。这个程序有很多的环境变量来设置程序的一些行为,最为常用的一个环境变量叫做"DYLD_INSERT_...

HeroHY
35分钟前
1
0
Spring Clould负载均衡重要组件:Ribbon中重要类的用法

Ribbon是Spring Cloud Netflix全家桶中负责负载均衡的组件,它是一组类库的集合。通过Ribbon,程序员能在不涉及到具体实现细节的基础上“透明”地用到负载均衡,而不必在项目里过多地编写实现...

Ala6
44分钟前
0
0
让 linux 删除能够进入回收站

可以参考这个贴子 https://blog.csdn.net/F8qG7f9YD02Pe/article/details/79543316 从那个git地址 把saferm.sh下载下来 把saferm.sh复制到 /usr/bin 目录下 在用~/目下 的.bashrc 下加一句这...

shzwork
54分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部