jquery点击“遇到问题”隐藏和展现更多文字

来源：互联网发布：ubuntu 32 编辑：程序博客网时间：2024/05/16 07:46

先上效果图

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

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>联系我们<a target="_blank"                                            href="http://wpa.qq.com/msgrd?v=3&uin=847064370&site=qq&menu=yes"><img                                                border="0" src="http://wpa.qq.com/pa?p=2:847064370:51"                                                alt="点击这里给我发消息" title="点击这里给我发消息" /></a> <a target="_blank"                                            href="http://wpa.qq.com/msgrd?v=3&uin=1132239136&site=qq&menu=yes"><img                                                border="0" src="http://wpa.qq.com/pa?p=2:1132239136:51"                                                alt="点击这里给我发消息" title="点击这里给我发消息" /></a>                                        </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 0