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

效果:

Practical Training Demo1-album-list的jquery

 

上一篇:Appium+python自动化-元素定位uiautomatorviewer的使用


下一篇:Android卡片设置透明度失效问题