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 相关文章推荐
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
对vuex中store和$store的区别说明
Jul 24 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项目中比较通用的php自建函数的详解
2013/06/06 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
onpropertypchange
2006/07/01 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
angular十大常见问题
2017/03/07 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
新年爱情寄语
2014/04/08 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
五一劳动节活动总结
2015/02/09 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
Pygame Time时间控制的具体使用详解
2021/11/17 Python