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,移动端通用)的更多相关文章

  1. js如何实现点击显示和隐藏表格

    js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...

  2. JS点击显示隐藏内容

    JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...

  3. js点击显示隐藏

    这个栗子…… 可以不吃,先预设一个变量表示div的状态,例子中0是显示的,一开始是隐藏的.当点击时判断状态是显示0的还是隐藏1的:如果是显示的就把div隐藏,再把变量改变为1.再次点击时把会判断到变量 ...

  4. legend3---19、要更多的从服务器端控制元素的显示和隐藏,而不要是页面端

    legend3---19.要更多的从服务器端控制元素的显示和隐藏,而不要是页面端 一.总结 一句话总结: 这样可以控制很多页面端的非法操作 1.html标签中data方式的数据,修改之后在标签上只显示 ...

  5. js密码修改显示与隐藏效果

    一.添加input框 <form class="login_form"> <input class="password inputpwd" i ...

  6. js 与JQuery显示及隐藏方法

    虽然以后两种方式都能让文本信息隐藏和显示 第一种文本隐藏以后还是会占居位置, 第二种则不会占位置. <p id="p1">这是一段文本.</p> <i ...

  7. vue点击切换样式,点击切换地址栏,点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  8. js控制div显示与隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. vueJS简单的点击显示与隐藏的效果

    目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性, ...

随机推荐

  1. 已知json类型根据类型封装集合

    1编写帮助类根绝url得到json public static string Post(string url) { string strURL = url; //创建一个HTTP请求 HttpWebR ...

  2. graylog2 架构--转载

    原文地址:http://docs.graylog.org/en/latest/pages/architecture.html Architectural considerations There ar ...

  3. nandsim ubi nand nor

    nandsim模拟mtd测试UBI模块 利用nandsim挂载ubi文件系统 MTD设备及JFFS2, UBIFS文件系统的使用简介 首先需要安装mtd_utils工具: sudo apt-get i ...

  4. Linux vsftpd 无法登录 cannot change directory:xxx priv_sock_get_cmd 问题

    配置vsftpd时本地用户无法切换不能登录问题.问题如下: C:\Users\kai>ftp ftp> open 172.24.144.10 连接到 172.24.144.10. (vsF ...

  5. oracle 自增列设置

    序列 create sequence sq_1 minvalue maxvalue start increment cache ; 触发器 create or replace trigger 触发器名 ...

  6. HTML的style属性

    HTML的style属性 HTML的style属性提供了一种改变HTML样式的通用方法.style是在HTML4版本中引用的,它是一种首选的改变HTML元素样式的方法.可以使用style直接的将样式添 ...

  7. Repeater控件中的LinkButton(转)

    LinkButton小用法: 1.在使用时可以通过CommandName和CommandArgument属性联合起来绑定并传值,如:CommandName="record"Comm ...

  8. HTTP层 —— Session

    1.简介 由于HTTP驱动的应用是无状态的,所以我们使用Session来存储用户请求信息.Laravel通过干净.统一的API处理后端各种Session驱动,目前支持的流行后端驱动包括Memcache ...

  9. Web.config配置详解【转 】

    一.认识Web.config文件 Web.config   文件是一个XML文本文件,它用来储存   ASP.NET   Web   应用程序的配置信息(如最常用的设置ASP.NET   Web   ...

  10. vs2010打包winform程序详解

    vs2010打包winform程序详解   最近一直在做winform程序,做完后程序打包很头疼,第三方打包工具,好用的花钱,不花钱的不好用,最后只能用vs自带的打包工具了! 打包过程vs2010(包 ...