點擊展開和收起-toggleClass()

有時候選項太多需要摺疊展開的效果，類似https://3g.163.com/touch/ 或 淘寶多選項頁面。

首先引用JQuery文件和JQuery-ui文件（<script type="text/javascript" src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>）

JS代碼：

<script type="text/javascript">
$(function(){
    //點擊展開/收起按鈕
    $(".toggle-btn").click(function(){
        $("#branch-btn").toggleClass("sx_list_closed",500);
        return false;
    });
  })    
</script>

HTML部分代碼： 

<div class="sx_box"><span>分部</span>
        <div class="sx_list sx_list_closed" id="branch-btn">
            <a href="{:url('index/news/index',['branch_id'=>0,'channel_id'=>$channel_id,'item_id'=>$item_id,'new_type'=>$new_type])}" {empty name="new_type"}class="selected"{/empty}>全部 </a>
            {volist name="branch" id="vo"}
            <a href="{:url('index/news/index',['branch_id'=>$vo.org_id,'channel_id'=>$channel_id,'item_id'=>$item_id,'new_type'=>$new_type])}" {if condition="$branch_id eq $vo.org_id"}class="selected"{/if} >{$vo.realname}</a>
            {/volist}
            <div class="clear"></div>
            <div class="toggle-btn"><em>展開/收起</em></div>
        </div>
        <div class="clear"></div>
    </div>

CSS部分代碼：

.sx .sx_box .sx_list .toggle-btn{font-size:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:1.5rem;height:1.4rem;padding-right:.5rem;padding-bottom:.5rem;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:all .3s linear;-o-transition:all .3s linear;transition:all .3s linear;position:absolute;bottom:0;right:0}
.sx .sx_box .sx_list .toggle-btn em{font-size:0;display:block;width:1rem;height:1rem;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAAA30lEQVR42rWVsQ3DIBRErZSZwENkjrjAcwCiygYMYGbJIMkUGSG1i4STQoS+ZJ/Rty1dYfN17xsO6Ibb2FlrDRRjPOH9SIFReHgv8M9P96zzUXB4g1HxjGwAeoQQ+r3h8HTOPQXLlM6SGHh57y97weEFT8FIGPsXufzkj3NV8M66auHwgFflO4NVxmWnw1Jxg1Z/Coy6Zut0TUhvY9KnLctKA0N2CE06BK+lYFOjlh2CMdS0NE6nkuwQmnS2dMow6cNLCxiENEelPlC0B5jqSOVJ51JeKvpLTHutJpJ0qi8j5J1z+JO9CgAAAABJRU5ErkJggg==) no-repeat 50% 50%;-webkit-background-size:contain;background-size:contain;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
.sx .sx_box .sx_list_closed {height:3.4rem; overflow: hidden;}
.sx .sx_box .sx_list_closed .toggle-btn em{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}

效果展示【PC/WAP】：https://www.zbgedu.com/news/