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

 更新时间:2016年12月03日 15:00:36   作者:静深的成长笔记  
这篇文章主要为大家详细介绍了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; }

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

相关文章

  • jQuery操作css方法的超全用法

    jQuery操作css方法的超全用法

    最近看了下jQuery的源代码,其中关于CSS及className的操作思想确实很不错,值得借鉴,下面这篇文章主要给大家介绍了关于jQuery操作css方法的超全用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • jQuery实现动态添加和删除一个div

    jQuery实现动态添加和删除一个div

    我想做一个可以动态添加删除div的功能。中间遇到一个问题,最后在网友的热心帮助下解决了,使用到的jquery方法和思想就是:事件的绑定和销毁(unbind)
    2015-08-08
  • JQuery 获取Dom元素的实例讲解

    JQuery 获取Dom元素的实例讲解

    下面小编就为大家带来一篇JQuery 获取Dom元素的实例讲解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • jQuery判断checkbox选中状态

    jQuery判断checkbox选中状态

    这篇文章主要介绍了jQuery判断checkbox选中状态的相关资料,非常具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-05-05
  • jQuery实现购物车的总价计算和总价传值功能

    jQuery实现购物车的总价计算和总价传值功能

    这篇文章主要介绍了jQuery实现购物车的总价计算和总价传值功能 ,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • jQuery实现的AJAX简单弹出层效果代码

    jQuery实现的AJAX简单弹出层效果代码

    这篇文章主要介绍了jQuery实现的AJAX简单弹出层效果代码,涉及jQuery响应鼠标事件动态操作页面元素实现弹出层效果的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • Jquery 实现Tab效果 思路是js思路

    Jquery 实现Tab效果 思路是js思路

    Jquery 实现Tab效果,思路就是普通的用js的思路控制的,脚本之家发布过更精简的代码,这个比较适合一直用js开始学用jquery控制的朋友一个参考。
    2010-03-03
  • CSS3 media queries结合jQuery实现响应式导航

    CSS3 media queries结合jQuery实现响应式导航

    这篇文章主要为大家详细介绍了CSS3 media queries结合jQuery实现响应式导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • $.ajax返回的JSON无法执行success的解决方法

    $.ajax返回的JSON无法执行success的解决方法

    为什么会这样子呢?在网上查了好久,结果发现是因为我指定了dataType:'json',这样一指定完蛋了,对Json的要求就非常严格起来了
    2011-09-09
  • js原生态函数中使用jQuery中的 $(this)无效的解决方法

    js原生态函数中使用jQuery中的 $(this)无效的解决方法

    今天遇到一个听郁闷的问题,正如title所说 js中原生态函数在jQuery 中使用 $(this) 被解析成undefined
    2011-05-05

最新评论