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 相关文章推荐
js获取变量
Aug 24 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
php时间不正确的解决方法
2008/04/09 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
PHP静态方法和静态属性及常量属性的区别与介绍
2019/03/22 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
js实现左右轮播图
2020/01/09 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
用Python实现数据的透视表的方法
2018/11/16 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
Python 画出来六维图
2019/07/26 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
python numpy实现rolling滚动案例
2020/06/08 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
FC-Moto美国:欧洲最大的摩托车服装和头盔商店之一
2019/08/24 全球购物
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
弘扬焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
退休欢送会主持词
2015/07/01 职场文书
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
vue elementUI表格控制对应列
2022/04/13 Vue.js