标签：album jquery Training closest auto list height active css

点击 更多 可以 变换 收起 ：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。