一款js点击显示和隐藏的例子(pc,移动端通用)
html部分: <div id="box">
<div id="box_title">标题</div>
<div id="box_content">11111111<br/>2222222<br/>333333</div>
</div>
css部分: <style>
#box {position:fixed;bottom:;z-index:;width:100%;}
#box_title {background: #ff2a2a;}
#box_content {display: none;}
</style>
js部分:
<script>
window.onload = function(){
document.querySelector("#box_title").addEventListener("click",function(){
var o = document.querySelector("#box_content")
if(o.className == '') {
o.style.display = 'block';
o.className = 'active';
}else{
o.style.display = 'none';
o.className = '';
}
},false);
} </script>
一款js点击显示和隐藏的例子(pc,移动端通用)的更多相关文章
- js如何实现点击显示和隐藏表格
js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...
- JS点击显示隐藏内容
JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...
- js点击显示隐藏
这个栗子…… 可以不吃,先预设一个变量表示div的状态,例子中0是显示的,一开始是隐藏的.当点击时判断状态是显示0的还是隐藏1的:如果是显示的就把div隐藏,再把变量改变为1.再次点击时把会判断到变量 ...
- legend3---19、要更多的从服务器端控制元素的显示和隐藏,而不要是页面端
legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...
- js密码修改显示与隐藏效果
一.添加input框 <form class="login_form"> <input class="password inputpwd" i ...
- js 与JQuery显示及隐藏方法
虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...
- vue点击切换样式,点击切换地址栏,点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
- js控制div显示与隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vueJS简单的点击显示与隐藏的效果
目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性, ...
随机推荐
- 进程间通信之FIFO
FIFO有时被称为命名管道.管道只能由相关进程使用,这些相关进程的共同祖先进程创建了管道.但是,通过FIFO,不相关的进程也能交换数据. FIFO是一种文件类型(参考http://www.cnblog ...
- NetBeans 安装Android 开发环境
基本的开发环境都是Eclipse + Android SDK + Android plugin for Eclipse NetBeans下开发Android的所需要的基本条件:NetBeans(包含J ...
- 解决TableView / ScrollView上的Menu问题(1滑出View区域还可点击2导致点击menu后View不能滑动)
解决TableView / ScrollView上的Menu问题 1划出区域还可点击 重写CCMenu的触摸事件函数 TouchBegin/TouchMove/TouchCancle/TouchEnd ...
- ios webview点击图片看大图效果及相应手势操作
下面参考资料有比较详细的解释,在之前的就项目中也有比较好的效果(支持更多手势),可以参考下 参考资料
- [ImportNew]Java中的Timer类和TimerTask类
http://www.importnew.com/9978.html java.util.Timer是一个实用工具类,该类用来调度一个线程,使它可以在将来某一时刻执行. Java的Timer类可以调度 ...
- ‘初始化锁相环INIT_PLL()’
在XS128的SCI学习的过程中,INIT_PLL()显得很重要,初始化锁相环几乎在每个程序中都有,今天看的程序-初始化锁相环的相关代码如下: /*************************** ...
- Linux(CentOS6.5)系统安装Nginx
Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大型的入口 ...
- Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式
Jquery Easyui验证扩展,Easyui验证,Easyui校验,js正则表达式 >>>>>>>>>>>>>> ...
- 浅谈.NET中加密和解密的实现方法分享
这篇文章介绍了.NET中加密和解密的实现方法,有需要的朋友可以参考一下 .NET将原来独立的API和SDK合并到一个框架中,这对于程序开发人员非常有利.它将CryptoAPI改编进.NET的Syste ...
- 一段C程序分析
#include <stdio.h> #include <stdlib.h> void main() { int i; ; char ch; printf("请输入一 ...