移动端右侧导航 显示隐藏js
transform与fixed影响
html按钮
<span class="nav-btn"></span>
<span class="close"></span>
css显示隐藏样式
body.active{ /* class=active的标签生效 */
transform: translate3d(-260px,0,0);
transition: all 0.2s ease-in-out;
}
body.show{ /* class=show的标签生效 */
transform: translate3d(0px,0,0);
transition: all 0.2s ease-in-out;
}
js部分
// 右侧导航
document.addEventListener("DOMContentLoaded", function(){
(function(){
var btn = document.querySelector(".nav-btn"),
clo = document.querySelector(".close"),
body = document.querySelector("body");
btn.onclick = function(){
body.classList.add("active"); //添加左划动画
body.classList.remove("show"); //删除右划动画
btn.style.display='none'; //隐藏三横按钮
clo.style.display='block' //显示X按钮
// $('.nav-btn').css({display:'none'}), //jQuery显示隐藏方法
// $('.close').css({display:'block'})
}
clo.onclick = function(){
body.classList.add("show"); //添加右划动画
body.classList.remove("active"); //删除左划动画
btn.style.display='block'; //显示三横按钮
clo.style.display='none'; //隐藏X按钮
// $('.nav-btn').css({display:'block'}),
// $('.close').css({display:'none'})
}
})(window)
},false);
移动端右侧导航 显示隐藏js的更多相关文章
- 基于jQuery实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- jQuery网页右侧固定层显示隐藏在线qq客服代码
CSS代码: @charset "utf-8"; ;;} html,body{font-size:12px;font-family:"微软雅黑";outline ...
- HTML鼠标悬浮显示隐藏 JS方法
CSS样式表: @charset "utf-8"; /* CSS Document */ .a { width:80px; height:40px; top:200px; left ...
- JS控制文本框中的密码显示/隐藏功能
<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...
- js和jquery实现显示隐藏
(选择的重要性) 当点击同一个按钮的时候实现显示影藏 <a id="link" class="b-btn-four task-resolve add-sub-tas ...
- 执行js,通过js显示隐藏的输入框,或者给input赋值
在测试过程中,有些输入框是隐藏的,如果直接对他进行赋值,会找不到这个输入框,从而导致脚本运行失败. 例如下面的这个密码输入框: 登录密码输入框分为两个input,下面的是提示的,上面的才是真正存下来的 ...
- js获取元素显示隐藏的当前状态
js获取元素显示隐藏的当前状态 // CSS var display = $("."+cls).css("display"); if(display == &q ...
- 旁门左道通过JS与纯CSS实现显示隐藏层
想必大家在开发前端页面时,肯定少不了显示隐藏层这一技术点.那么我简单粗暴地总结了以下两个小demo. 要实现该截图的功能:鼠标移动到我的好友这个选项卡时,灰色的隐藏层就会出现.
- JS组件系列——显示隐藏密码切换的jQuery插件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
随机推荐
- windows系统下的特殊目录导致的FileNotFoundException
环境:下面只有JDK(内含jre),没有外在的jre 读取的两个文件都是存在的,只是文件名不同 运行结果1 运行结果2 切换JDK 运行结果3: 运行结果4: 请留意:C:\windows\syste ...
- qsort.c源码
/* 版权所有(C) 1991-2019 自由软件资金会. 该文件属于是GUN C语言函数库,由Douglas C. Schmidt(schmidt@ics.uci.edu)所写. GUN C语言函数 ...
- java循环1
public class f_w { public static void main(String []args) { int a=0; System.out.print("_info__w ...
- 一道B树的题目---先记一下, 还没看到B树
D
- LODOP不同电脑打印效果不同排查
1.位置不同,偏移问题.详细的相关偏移问题的博文:LODOP不同打印机出现偏移问题 2.样式问题. 本机浏览器解析样式不同 ,相关超文本样式博文:Lodop打印控件传入css样式.看是否传入正确样式 ...
- element 给table的个别表格框添加样式 ---重构里面的组件
<el-table ref="singleTable" :show-header='false' :data="tableData" align='cen ...
- poj 3694(割边+lca)
题意:给你一个无向图,可能有重边,有q次询问,问你每次我添加一条边,添加后这个图还有多少个桥 解题思路:首先先把所有没有割边的点对缩成一个联通块,无向图一般并查集判环,然后就得到一个割边树,给你一条新 ...
- 「NOIp2018」 游记
作为一个蒟蒻要去考tg了,心理还是有点慌的.初赛70,心惊胆战很长时间,后来降分到68了,居然卡线了(震惊……) $Day \ 0$ 今天请假在家复习了,打了几个数据结构模板.希望明天考场能++rp啊 ...
- MYSQL配置主从同步
MYSQL配置主从同步 mysql主服务器配置 vim /etc/my.cnf [mysqld] datadir=/var/lib/mysql socket=/var/lib/mysql/mysql. ...
- (八)控件介绍,QLable
Radio单选框 默认互斥,加GroupBox进行分组可以解决这个 checkBox复选 ListWidget TableWIdget:有表头 #include "widget.h" ...