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; }

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

赞 (0)

相关推荐

  • jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

    jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果

    本文实例讲述了jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果.分享给大家供大家参考,具体如下: 这里演示jQuery实现鼠标移动到链接上,滑动展开/隐藏图片效果,鼠标放在"上一页""下一页"上,立即浮现出所对应的图片,有点提前预览的味道,让用户知道下一页或下一页的大致内容,很好的提升了用户体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-link-pic-show-

  • toggle一个div显示或隐藏且可扩展成自定义下拉框

    复制代码 代码如下: $(function(){ //toggle div $("#gga").click(function(event){ event.stopPropagation(); //阻止冒泡事件 $(".toggleoption").slideToggle("fast"); }); //slideup div $(document).click(function(event) { var eo = $(event.target);

  • jquery控制页面的展开和隐藏实现方法(推荐)

    [jquery代码]  <script> require(["jquery","validate","bootstrap","lhgcalendar"],function($) { $(function(){ $("form").validate(); }); $(".up").click(function(){ $(this).parent().parent().paren

  • jquery特效 点击展示与隐藏全文

    jquery特效 点击展示与隐藏全文

    本文实例讲述了jquery点击展示与隐藏全文特效,这里使用jquery实现展开.隐藏特效,点击查看全文后内容展开,点击收起全文其内容收缩,分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 一.来看一下主体框架程序: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>点击查看全文</title> <link type=&

  • jquery实现点击展开列表同时隐藏其他列表

    jquery实现点击展开列表同时隐藏其他列表

    本文实例讲述了jquery实现点击展开列表同时隐藏其他列表.分享给大家供大家参考.具体如下: 这里使用jquery实现展开.隐藏特效,点击列表标题后该项内容展开,其它项收缩起来,也就是不显示了.个人喜好了,有的喜欢在默认状态下不显示其它选项的内容,这个就是这种情况,仅供参考吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

  • jQuery焦点控制图层展示延迟隐藏的方法

    本文实例讲述了jQuery焦点控制图层展示延迟隐藏的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> </head> <body> <b id="button"

  • JS实现鼠标点击展开或隐藏表格行的方法

    本文实例讲述了JS实现鼠标点击展开或隐藏表格行的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • 用javascript 控制表格行的展开和隐藏的代码

    无标题文档 function $(obj) { return document.getElementById(obj); } function close_open() { if($("myTr").currentStyle.display == "none") { $("myTr").style.display = ""; } else { $("myTr").style.display = "

  • JS点击链接后慢慢展开隐藏着图片的方法

    本文实例讲述了JS点击链接后慢慢展开隐藏着图片的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>JS点击链接后,慢慢展开隐藏着的图片</title> <body> <script language="JavaScript"> var b=0; var c=true; function fade(){ if(document.all); if(c == true){b+=3} i

  • 右键显示(隐藏)扩展名的bat代码

    "显示/隐藏 系统文件"需右键单击任意文件夹或文件才能显示菜单 "显示/隐藏 扩展名"需右键单击任意文件夹里的空白处才能显示菜单 右键显示(隐藏)扩展名及系统文件.bat 复制代码 代码如下: @echo off reg delete "HKCR\CLSID\{00000000-0000-0000-0000-000000000012}" /f >nul 2>nul reg delete "HKLM\SOFTWARE\Clas

随机推荐