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. 思科(Cisco)路由器策略路由配置详解

    策略路由是路由优化的常用方法.在做路由牵引时很多情况都要用到策略路由.我刚刚接触思科这东西,对策略路由的配置还不太熟悉,今天终于配好了,记录一下. 网络拓扑 R2的E1\E2口分别与R3的E1\E2口 ...

  2. javascript——马步之Array篇

    数组 Array == 1.建立数组==* 通过变量赋值为[]来建立数组 var arr = []; // arr 是一个数组 * 需要注意数组的下标是从0开始中的 ==2.获取数组长度== * 通过 ...

  3. Simple Membership 学习笔记

    第一步:新建项目后添加对WebMartix.Data 和 WebMatrix.WebData的引用第二步:在web.config中添加membership配置节第三步:修改Global.asax文件 ...

  4. Java 8 Stream API Example Tutorial

    Stream API Overview Before we look into Java 8 Stream API Examples, let’s see why it was required. S ...

  5. PHP代码加密 -- php_strip_whitespace函数,去掉源代码所有注释和空格并显示在一行

    <?php function stripCommentAndWhitespace($path = '') { if (empty($path)) { echo '请指定要操作的文件路径'; re ...

  6. ibatis返回结果映射到HashMap时,列名无效的问题

    遇到问题: 1.项目开发过程中在xml配置文件中使用$tableName/sql$时,报"列名无效"错误,后来经过查询,发现是ibatis缓存 了上一次查询的表结构的原因.解决办法 ...

  7. [未完成]关于Maven的使用总结

    什么是maven 翻译为“专家”,“内行” Maven是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 什么是理想的项目构建? 高度自动化,跨平台,可重用的组件, ...

  8. 4k 对齐,你准备好了吗?

    什么是 4k 对齐? 其实与 “ 4K对齐 ” 相关联的是一个叫做 “ 高级格式化 ” 的分区技术.“ 高级格式化 ” 是国际硬盘设备与材料协会为新型数据结构格式所采用的名称.这是主要鉴于目前的硬盘容 ...

  9. gitlab ce 中删除空项目之后,没有删除掉,访问500

    在VirtualBox中的gitlab ce,在管理页面的操作如下: 新建一个仓库名为test的仓库,并从gitlab中导入 导入失败,使用root用户登录,在 Admin Area -> Pr ...

  10. ajax开发模拟后端数据接口

    在做前端开发的时候,特别是一些业务逻辑集中在前端的开发中.我们经常需要自己来模拟获取到后台接口的数据.为什么要模拟?可能后台接口还没有开发完成,可能后台还没有数据返回,可能...等等原因.曾经,我也尝 ...