jQuery-可收缩面板

最新推荐文章于 2020-07-21 10:09:12 发布

weixin_34001430

最新推荐文章于 2020-07-21 10:09:12 发布

阅读量319

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/51505

本文介绍了一种使用jQuery实现的可收缩面板效果，适用于展示大量消息或评论的场景。通过简单的JavaScript代码，实现了面板的展开与折叠功能，并提供了显示所有消息或只显示最近几条消息的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可收缩的面板（像Gmai收件箱面板l）。可以应用在文章、新闻评论列表中。见图效果：

js:

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            //hide message_body after the first one
            $(".message_list .message_body:gt(0)").hide();

            //hide message li after the 5th
            $(".message_list li:gt(4)").hide();


            //toggle message_body
            $(".message_head").click(function () {
                $(this).next(".message_body").slideToggle(500)
                return false;
            });

            //collapse all messages
            $(".collpase_all_message").click(function () {
                $(".message_body").slideUp(500)
                return false;
            });

            //show all messages
            $(".show_all_message").click(function () {
                $(this).hide()
                $(".show_recent_only").show()
                $(".message_list li:gt(4)").slideDown()
                return false;
            });

            //show recent messages only
            $(".show_recent_only").click(function () {
                $(this).hide()
                $(".show_all_message").show()
                $(".message_list li:gt(4)").slideUp()
                return false;
            });

        });
    </script>

 
          <style type=
          "text/css"
          > 
         
          * 
         
          { 
         
          margin
          : 
          0
          ; 
         
          padding
          : 
          0
          ; 
         
          } 
         
          body 
         
          { 
         
          margin
          : 
          10px 
          auto
          ; 
         
          width
          : 
          570px
          ; 
         
          font
          : 
          75%
          /
          120% 
          Arial
          , 
          Helvetica
          , 
          sans-serif
          ; 
         
          } 
         
          p 
         
          { 
         
          padding
          : 
          0 
          0 
          1em
          ; 
         
          } 
         
          /* message display page */ 
         
          .message_list 
         
          { 
         
          list-style
          : 
          none
          ; 
         
          margin
          : 
          0
          ; 
         
          padding
          : 
          0
          ; 
         
          width
          : 
          383px
          ; 
         
          } 
         
          .message_list li 
         
          { 
         
          padding
          : 
          0
          ; 
         
          margin
          : 
          0
          ; 
         
          background
          : 
          url
          (images/collapsible-panels/message-bar.gif) 
          no-repeat
          ; 
         
          } 
         
          .message_head 
         
          { 
         
          padding
          : 
          5px 
          10px
          ; 
         
          cursor
          : 
          pointer
          ; 
         
          position
          : 
          relative
          ; 
         
          } 
         
          .message_head .timestamp 
         
          { 
         
          color
          : 
          #666666
          ; 
         
          font-size
          : 
          95%
          ; 
         
          position
          : 
          absolute
          ; 
         
          right
          : 
          10px
          ; 
         
          top
          : 
          5px
          ; 
         
          } 
         
          .message_head cite 
         
          { 
         
          font-size
          : 
          100%
          ; 
         
          font-weight
          : 
          bold
          ; 
         
          font-style
          : 
          normal
          ; 
         
          } 
         
          .message_body 
         
          { 
         
          padding
          : 
          5px 
          10px 
          15px
          ; 
         
          } 
         
          .collapse_buttons 
         
          { 
         
          text-align
          : 
          right
          ; 
         
          border-top
          : 
          solid 
          1px 
          #e4e4e4
          ; 
         
          padding
          : 
          5px 
          0
          ; 
         
          width
          : 
          383px
          ; 
         
          } 
         
          .collapse_buttons a 
         
          { 
         
          margin-left
          : 
          15px
          ; 
         
          float
          : 
          right
          ; 
         
          } 
         
          .show_all_message 
         
          { 
         
          background
          : 
          url
          (images/collapsible-panels/tall-down-arrow.gif) 
          no-repeat 
          right 
          center
          ; 
         
          padding-right
          : 
          12px
          ; 
         
          } 
         
          .show_recent_only 
         
          { 
         
          display
          : 
          none
          ; 
         
          background
          : 
          url
          (images/collapsible-panels/tall-up-arrow.gif) 
          no-repeat 
          right 
          center
          ; 
         
          padding-right
          : 
          12px
          ; 
         
          } 
         
          .collpase_all_message 
         
          { 
         
          background
          : 
          url
          (images/collapsible-panels/collapse-
          all
          .gif) 
          no-repeat 
          right 
          center
          ; 
         
          padding-right
          : 
          12px
          ; 
         
          color
          : 
          #666666
          ; 
         
          } 
         
          </style>

<body>
    <ol class="message_list">
        <li>
            <p class="message_head">
                <cite>someone:</cite> <span class="timestamp">1 minute ago</span></p>
            <div class="message_body">
                <p>
                    Hello Nick,<br />
                    <br />
                    This is the latest message display. The rest are collapsed by default</p>
            </div>
        </li>
        <li>
            <p class="message_head">
                <cite>nick:</cite> <span class="timestamp">2 minutes ago</span></p>
            <div class="message_body">
                <p>
                    message here</p>
            </div>
        </li>
        <li>
            <p class="message_head">
                <cite>someone:</cite> <span class="timestamp">1 day ago</span></p>
            <div class="message_body">
                <p>
                    message here</p>
            </div>
        </li>
        <li>
            <p class="message_head">
                <cite>nick:</cite> <span class="timestamp">2 days ago</span></p>
            <div class="message_body">
                <p>
                    message here</p>
            </div>
        </li>
        <li>
            <p class="message_head">
                <cite>someone:</cite> <span class="timestamp">3 days ago</span></p>
            <div class="message_body">
                <p>
                    message here</p>
            </div>
        </li>
        <li>
            <p class="message_head">
                <cite>nick:</cite> <span class="timestamp">5 days ago</span></p>
            <div class="message_body">
                <p>
                    message here</p>
            </div>
        </li>
        <li>
            <p class="message_head">
                <cite>someone:</cite> <span class="timestamp">6 days ago</span></p>
            <div class="message_body">
                <p>
                    message here</p>
            </div>
        </li>
        <li>
            <p class="message_head">
                <cite>nick:</cite> <span class="timestamp">7 days ago</span></p>
            <div class="message_body">
                <p>
                    message here</p>
            </div>
        </li>
        <li>
            <p class="message_head">
                <cite>someone:</cite> <span class="timestamp">8 days ago</span></p>
            <div class="message_body">
                <p>
                    message here</p>
            </div>
        </li>
    </ol>
    <p class="collapse_buttons">
        <a href="#" class="show_all_message">Show all message (9)</a> <a href="#" class="show_recent_only">
            Show 5 only</a> <a href="#" class="collpase_all_message">Collapse all</a></p>
</body>