站长资源网络编程

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

整理:jimmy2026/8/2浏览2
简介先上效果图点击前 点击后展开 html代码
遇到问题?
  1. Ctrl+F5刷新本页面
  2. 先上效果图

    点击前

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

    点击后展开

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

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