jQuery之美——手风琴

手风琴是非常常见而实用的效果，本篇文章示例一个简单的手风琴效果。
上效果图：
jQuery之美——手风琴
源码如下：
<!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="[email protected]">
    <title>jQuery之美——手风琴</title>
    <meta name="keywords" content="黄河爱浪,WEB前端河浪,jQuery插件开发者河浪">
    <meta name="description" content="公众号:web-7258,QQ:1846492969,邮箱:[email protected]">
    <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>[email protected]</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;">[email protected]</h5>
<script type="text/javascript" src="../access/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>