点击 更多 可以 变换 收起 :
jQuery代码:
$(function(){ $(".load-more").click(function(){ // 方法一 // var $list = $(this).closest(".filter-list"); // 获取高度 // var height = $list.css("height"); // if (height==="30px") { // $(this).addClass("active"); // // parent closest // $list.css({"overflow":"auto","height":"auto"}); // } else { // $(this).removeClass("active"); // $list.css({"overflow":"auto","height":"30px"}); // } // 方法二 // hasClass () =》是jQuery中的一个内置方法,用于检查具有指定类名的元素是否存在。 if ($(this).hasClass("active")) { // 隐藏内容==》 当显示时,隐藏其他内容 判断有没有这个类, // closest()==》 找第一个匹配的父节点 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。 $(this).removeClass("active").closest(".filter-list").css({"overflow":"hidden","height":"30px"}); } else { // 显示内容 $(this).addClass("active").closest(".filter-list").css({"overflow":"auto","height":"auto"}) } }); });
效果: