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

摘要：这篇文章主要为大家详细介绍了jquery点击展示与隐藏更多内容的相关资料.html代码<div id="tips" class="center-block">               

这篇文章主要为大家详细介绍了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点击展示与隐藏更多内容请关注PHP中文网（www.php.cn）其它文章！