点击展开和收起-toggleClass()

有时候选项太多需要折叠展开的效果，类似https://3g.163.com/touch/ 或 淘宝多选项页面。

首先引用JQuery文件和JQuery-ui文件（）

JS代码：

HTML部分代码： 

分部
        

            全部 
            {volist name="branch" id="vo"}
            {$vo.realname}
            {/volist}
            

            
展开/收起
        
        

    

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/