jQuery实现点击显示和隐藏内容

先上效果图 点击前 这里写图片描述 点击后展开 这里写图片描述 html代码如下
  1. <div id="tips" class="center-block">
  2.     <h5 class="tips_head">
  3.         <u>遇到问题?</u>
  4.     </h5>
  5.     <div class="tips_content">
  6.         <ol>
  7.             <li>Ctrl+F5刷新本页面</li>
  8.             <li>关闭页面,重新加载本页面和登录</li>
  9.             <li>更换浏览器(建议使用火狐和谷歌浏览器)</li>
  10.             <li>联系我们<a target="_blank"
  11.                 href="http://wpa.qq.com/msgrd?v=3&uin=847064370&site=qq&menu=yes"><img
  12.                     border="0" src="http://wpa.qq.com/pa?p=2:847064370:51"
  13.                     alt="点击这里给我发消息" title="点击这里给我发消息" /></a> <a target="_blank"
  14.                 href="http://wpa.qq.com/msgrd?v=3&uin=1132239136&site=qq&menu=yes"><img
  15.                     border="0" src="http://wpa.qq.com/pa?p=2:1132239136:51"
  16.                     alt="点击这里给我发消息" title="点击这里给我发消息" /></a>
  17.             </li>
  18.         </ol>
  19.     </div>
  20. </div>
jQuery代码如下
  1. $(function() { //遇到问题的弹出文字
  2.            $("#tips h5.tips_head").bind("click"function() {
  3.                var $tips_content = $(this).next("div.tips_content");
  4.                if ($tips_content.is(":visible")) {
  5.                    $tips_content.hide();
  6.                } else {
  7.                    $tips_content.show();
  8.                }
  9.            })
  10.        })
css代码如下
  1. .tips_head {
  2.     padding-left:20px;
  3.     cursorpointer ;
  4.     text-align:left;
  5.     margin-top:20px;
  6.     color:red;
  7. }
  8. .tips_content {
  9.     padding: ;
  10.     border-top1px solid #0050D0;
  11.     display:block;
  12.     display:none;
  13.     text-indent: 2em;
  14.     text-align:left;
  15. }
  本文地址:http://liuyanzhao.com/3491.html 转载请注明

发表评论

目前评论:1

  • avatar 123

    测试