jQuery 折叠面板

傷城~ 2022-05-14 15:51 259阅读 0赞

手风琴是非常常见而实用的效果，本篇文章示例一个简单的手风琴效果。

上效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_27_color_FFFFFF_t_70][]

源码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="author" content="helang.love@qq.com">
        <title>jQuery之美——折叠面板</title>
        <meta name="keywords" content="黄河爱浪,WEB前端河浪,jQuery插件开发者河浪">
        <meta name="description" content="公众号:web-7258,QQ:1846492969,邮箱:helang.love@qq.com">
        <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
                background-color: #ffffff;
                font-size: 14px;
                font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
                letter-spacing: 0;
                color: #333333;
            }
            /* 手风琴样式开始 */
            .accordion{
                margin: 0;
                padding: 0;
                list-style: none;
                background-color: #ffffff;
            }
            .accordion>li{
                margin: 0;
                padding:0;
                border-top: #EA0D04 solid 1px;
            }
            .accordion>li:first-child{
                border-top: none;
            }
            .accordion .title{
                height: 50px;
                line-height: 50px;
                background-color: #FD463E;
                padding: 0 20px;
                color: #ffffff;
                font-size: 18px;
                cursor: pointer;
            }
            .accordion .title>i{
                float: right;
                height: 50px;
                line-height: 50px;
            }
            .accordion .title:hover{
                background-color: #EA0D04;
            }
            .accordion .main{
                padding: 15px;
                border-left:#EA0D04 solid 1px;
                border-right:#EA0D04 solid 1px;
                display: none;
            }
            .accordion .main.last{
                border-bottom:#EA0D04 solid 1px;
            }
            /* 手风琴样式结束 */
        </style>
    </head>
    <body>
    <h1 style="text-align: center;margin: 20px 0;">jQuery之美——手风琴</h1>
    <div style="width: 600px;margin: 0 auto;">
        <ul class="accordion">
            <li>
                <div class="title">
                    <span>我的邮箱</span>
                    <i class="fa fa-chevron-down"></i>
                </div>
                <div class="main">
                    <h2>helang.love@qq.com</h2>
                </div>
            </li>
            <li>
                <div class="title">
                    <span>我的QQ</span>
                    <i class="fa fa-chevron-down"></i>
                </div>
                <div class="main">
                    <h2>1846492969</h2>
                </div>
            </li>
            <li>
                <div class="title">
                    <span>我的公众号</span>
                    <i class="fa fa-chevron-down"></i>
                </div>
                <div class="main">
                    <h2>WEB前端梦之蓝：web-7258</h2>
                </div>
            </li>
            <li>
                <div class="title">
                    <span>我的CSDN博客</span>
                    <i class="fa fa-chevron-down"></i>
                </div>
                <div class="main last">
                    <h2>
                        <div>CSDN博主 黄河爱浪的博客</div>
                        <div>
                            <a href="https://blog.csdn.net/u013350495" target="_blank" style="color: #00a8ff;">https://blog.csdn.net/u013350495</a>
                        </div>
                    </h2>
                </div>
            </li>
        </ul>
    </div>
    <h5 style="text-align: center;">helang.love@qq.com</h5>
    <script type="text/javascript" src="https://mydarling.gitee.io/resource/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        /* jQuery对象级别插件扩展 */
        $.fn.extend({
            hlAccordion:function () {
                var _self={};
                _self.el=$(this);
                _self.el.on("click",">li",function () {
                    $(this).find(".main").slideToggle();
                })
            }
        });
    
        $(".accordion").hlAccordion();
    </script>
    </body>
    </html>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_27_color_FFFFFF_t_70]: /images/20220503/e41046cd06d54a6cb3139655fb583eb5.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220503/50dabc65712f41afb51e0dc8720546e1.png