jquery点击展示与隐藏更多内容


Posted in Javascript onDecember 03, 2016

先上效果图

点击前

jquery点击展示与隐藏更多内容

点击后展开

jquery点击展示与隐藏更多内容

html代码

<div id="tips" class="center-block">
                <h5 class="tips_head">
                  <u>遇到问题?</u>
                </h5>
                <div class="tips_content">
                  <ol>
                    <li>Ctrl+F5刷新本页面</li>
                    <li>关闭页面,重新加载本页面和登录</li>
                    <li>更换浏览器(建议使用火狐和谷歌浏览器)</li>
                    <li>联系我们 </li>
                  </ol>
                </div>
              </div>

jquery代码

$(function() { //遇到问题的弹出文字
      $("#tips h5.tips_head").bind("click", function() {
        var $tips_content = $(this).next("div.tips_content");
        if ($tips_content.is(":visible")) {
          $tips_content.hide();
        } else {
          $tips_content.show();
        }
      })
    })

css代码

.tips_head { 
  padding-left:20px; 
  cursor: pointer ;
  text-align:left;
  margin-top:20px;
  color:red;}

.tips_content { 
  padding: ; 
  border-top: 1px solid #0050D0;
  display:block;
  display:none;
  text-indent: 2em;
  text-align:left; }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用javascript访问XML数据的实例
Dec 27 Javascript
驱动事件的addEvent.js代码
Mar 27 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 #Javascript
bootstrap模态框垂直居中效果
Dec 03 #Javascript
JS制作类似选项卡切换的年历
Dec 03 #Javascript
JS键盘版计算器的制作方法
Dec 03 #Javascript
js实现右键自定义菜单
Dec 03 #Javascript
js实现小窗口拖拽效果
Dec 03 #Javascript
学习vue.js计算属性
Dec 03 #Javascript
You might like
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python编程中的文件操作攻略
2015/10/16 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
html标签之Object和EMBED标签详解
2013/07/04 HTML / CSS
如何写一封打动人心的求职信
2014/02/17 职场文书
校庆接待方案
2014/03/18 职场文书
解除劳动合同协议书
2014/09/17 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
一些让Python代码简洁的实用技巧总结
2021/08/23 Python