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

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

image

html代码

    

         热门标签
    
    

        

            aaa
            bbb
            ccc
        
    

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 = $("展开");
        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 = $("收起");
            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);

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