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);

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