SOURCE

$(function () {

	// 默认展开需要展开的
    var $foldBlock = $('.js-fold');
    $foldBlock.find('.on .desc').slideDown();

    $foldBlock.on('click', '.tit', function (e) {
        var $fold = $(e.delegateTarget);
        var $on = $fold.find('.on');
        var $onDesc = $on.find('.desc');

        var $cur = $(this);
        var $curDesc = $cur.siblings('.desc');
        var $curParent = $cur.parent('.item');

        if($curParent.hasClass('on')) {
            $curDesc.slideUp('fast');
            $curParent.removeClass('on');
        } else {
            $curDesc.slideDown('fast');
            $curParent.addClass('on');

            if($fold.data('autofold') == 1) {
                $on.removeClass('on');
                $onDesc.slideUp('fast');
            }
        }
    });

});

<!-- 1. 相互关联的展开收起 -->
<div class="m-fold js-fold" data-autofold="1">
    <dl class="item on">
        <dt class="tit">相互关联的展开收起</dt>
        <dd class="desc">默认可以展开某一个</dd>
    </dl>
    <dl class="item">
        <dt class="tit">相互关联的展开收起</dt>
        <dd class="desc">这是点击展开后展示的内容</dd>
    </dl>
    <dl class="item">
        <dt class="tit">相互关联的展开收起</dt>
        <dd class="desc">这是点击展开后展示的内容</dd>
    </dl>
</div>


<br /><br />


<!-- 2. 单独的展开收起 -->
<div class="m-fold js-fold" data-autofold="0">
    <dl class="item on">
        <dt class="tit">单独的展开收起</dt>
        <dd class="desc">默认可以展开某一个</dd>
    </dl>
    <dl class="item">
        <dt class="tit">单独的展开收起</dt>
        <dd class="desc">这是点击展开后展示的内容</dd>
    </dl>
    <dl class="item">
        <dt class="tit">单独的展开收起</dt>
        <dd class="desc">这是点击展开后展示的内容</dd>
    </dl>
</div>


<br /><br />


<!-- 3. 菜单展开收起 -->
<div class="m-fold js-fold" data-autofold="1">
    <dl class="item on">
        <dt class="tit">菜单一</dt>
        <dd class="desc">
            <ul class="submenu">
                <li>子菜单一</li>
                <li>子菜单二</li>
                <li>子菜单三</li>
            </ul>
        </dd>
    </dl>
    <dl class="item">
        <dt class="tit">菜单二</dt>
        <dd class="desc">
            <ul class="submenu">
                <li>子菜单一</li>
                <li>子菜单二</li>
                <li>子菜单三</li>
            </ul>
        </dd>
    </dl>
    <dl class="item">
        <dt class="tit">菜单三</dt>
        <dd class="desc">
            <ul class="submenu">
                <li>子菜单一</li>
                <li>子菜单二</li>
                <li>子菜单三</li>
            </ul>
        </dd>
    </dl>
</div>

/* 展开收起模块 */
.m-fold { border-top: 1px solid #ddd; background: #fff; }
    /* 单个 */
    .m-fold .item {}
        /* 标题 */
        .m-fold .tit { position: relative; padding: 10px 24px 10px 10px; background: #eee; border-bottom: 1px solid #ddd; cursor: pointer;  }
            /* 标题右侧图标 */
            .m-fold .tit::after { content: ''; position: absolute; right: 0; top: 50%; width: 16px; height: 24px; background: url(http://pic.celong.cn/152353183810.png) no-repeat 100% 50%; -webkit-background-size: auto 50%; background-size: auto 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all .3s; transition: all .3s; }
            /* 点开时的标题右侧图标 */
            .m-fold .item.on .tit::after { -moz-transform: rotate(90deg) translate(-100%, 4px); -ms-transform: rotate(90deg) translate(-100%, 4px); -webkit-transform: rotate(90deg) translate(-100%, 4px); transform: rotate(90deg) translate(-100%, 4px); }
        /* 内容 */
        .m-fold .desc { display: none; padding: 10px; border-bottom: 1px solid #ddd; }
            /* 子菜单 */
            .m-fold .submenu {}
                .m-fold .submenu li { padding: 10px; border-bottom: 1px solid #ddd; }
                .m-fold .submenu li:last-child { border-bottom: none; }