Jquery实现简单的点击展开和收起小功能

当标签逐渐增多时，页面就会随着拉长；用户体验不佳。针对我自己博客用Jquery 写了一个小方法用于实现展开和收起的

html代码

<!-- hot tag -->
<div class="panel panel-default cloud">
    <div class="panel-heading">
        <span class="panel-title"><i class="fa fa-tags"></i>&nbsp;热门标签</span>
    </div>
    <div class="panel-body">
        <ul class="tag">
            <a href="#">aaa</a>
            <a href="#">bbb</a>
            <a href="#">ccc</a>
        </ul>
    </div>
</div>

jquery封装成方法的代码

// 设置标签的显示
function eleIsHidden(ele,zdheight,eleChlid){
    // 获取ele元素高(Height)
    var tagsHeight=ele.outerHeight(true);
    // 如果ele元素高(Height)大于指定的高度
    if(tagsHeight > zdheight){
        // ele元素的超出部分隐藏
        ele.css({"overflow":"hidden", "height":zdheight+"px", "marginBottom":"20px"});
        // 创建展开标签（span）并追加到eleChlid元素后
        var zkEle = $("<span class=\"tagsZkClick\">展开</span>");
        zkEle.prependTo(eleChlid);
        // 设置eleChlid元素为relative
        eleChlid.css({"position":"relative"});
        // 设置样式
        $(".tagsZkClick").css({
            "position":"absolute",
            "width":"100%",
            "height":"30px",
            "lineHeight":"30px",
            "top":(zdheight-75)+"px",
            "textAlign":"center",
            "backgroundColor":"#FFF",
            "cursor":"pointer",
            "color":"#c88326"
        });
        // 展开
        $(".tagsZkClick").click(function(){
            $(this).css({"display":"none"});
            ele.css({"overflow":"visible", "height":"auto","marginBottom":"40px"});
            var sqEle = $("<span class=\"tagsSqClick\">收起</span>");
            sqEle.appendTo(eleChlid);
            $(".tagsSqClick").css({
                "position":"absolute",
                "bottom":"-20px",
                "width":"100%",
                "height":"30px",
                "lineHeight":"30px",
                "textAlign":"center",
                "backgroundColor":"#FFF",
                "cursor":"pointer",
                "color":"#c88326"
            });
            // 收起
            $(".tagsSqClick").click(function(){
                // 先移除收起的标签
                $(this).remove();
                // 超出隐藏并设置展开的样式为可见
                ele.css({"overflow":"hidden", "height":zdheight+"px", "marginBottom":"20px"});
                $(".tagsZkClick").css({"display":"block"});
            });
        });
    }
}

js的方法的用法

// 获取 tags 元素
var ele = $(".cloud");
var zdheight = 320;
var eleChlid = $(".cloud .panel-body");
/* 调用方法 */
eleIsHidden(ele, zdheight, eleChlid);

具体的样式可以去我的博客查看：传送门