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

avatar 2016年08月08日20:34:30 1 4311 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
先上效果图

点击前
这里写图片描述

点击后展开
这里写图片描述

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.     cursor: pointer ;
  4.     text-align:left;
  5.     margin-top:20px;
  6.     color:red;
  7. }
  9. .tips_content {
  10.     padding: ;
  11.     border-top: 1px solid #0050D0;
  12.     display:block;
  13.     display:none;
  14.     text-indent: 2em;
  15.     text-align:left;
  16. }



本文地址：http://liuyanzhao.com/3491.html

转载请注明
历史上的今天
八月
08日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0