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 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
JavaScript实现256色转灰度图
Feb 22 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
vue.js实现的绑定class操作示例
Jul 06 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缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
图片自动更新(说明)
2006/10/02 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
2016/11/01 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
Vue组件通信之Bus的具体使用
2017/12/28 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Python卸载模块的方法汇总
2016/06/07 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python 调用Java实例详解
2017/06/02 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
基于python历史天气采集的分析
2019/02/14 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
华为python面试题
2016/05/03 面试题
如何客观的进行自我评价
2013/12/17 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
中国梦读书活动总结
2014/07/10 职场文书
平安工地汇报材料
2014/08/19 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
社会工作专业自荐信
2014/09/26 职场文书