Practical Training Demo1-album-list的jquery

点击 更多 可以 变换 收起 ：

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

效果：

标签：album,jquery,Training,closest,auto,list,height,active,css
来源： https://www.cnblogs.com/zky1012/p/15557859.html