javascript - .slideUp() 没有按预期工作

Question

我有一个图标可以同时触发向上滑动和向下滑动的效果，但是在向下滑动之后，如果我再次按下同一个图标，它就不再起作用了。

$(document).ready(function(){ 
    $('.subcat-row').hide();

    $("body").on("click",'.drop-subcat', function () {

        if($(this).children('i').attr('class','fa fa-toggle-down drop-down-icon')){
            $(this).closest('.category-row').siblings('.subcat-row').slideDown(500);
            $(this).children('.drop-down-icon').attr('class', 'fa fa-toggle-up drop-down-icon');
        } else if( $(this).children('i').attr('class','fa fa-toggle-up drop-down-icon') ){
            $(this).closest('.category-row').siblings('.subcat-row').slideUp(500);
            $(this).children('.drop-down-icon').attr('class', 'fa fa-toggle-down drop-down-icon');
        }
    });
});

这是我制作的 jsfiddle..

http://jsfiddle.net/vnbtfc92/

Answer 1

你遇到的问题是这个

.attr('class','fa fa-toggle-up drop-down-icon')

这会将类属性设置为 'fa fa-toggle-up drop-down-icon'，因此在 if 语句中使用是不正确的(即不返回 bool 值)。我想你的意思是测试这个类，所以使用 hasClass 代替(它返回一个 bool 值，true 或 false)，比如

$(document).ready(function(){ 
    $('.subcat-row').hide();

$("body").on("click",'.drop-subcat', function () {

        if($(this).children('i').hasClass('fa fa-toggle-down drop-down-icon')){

            $(this).closest('.category-row').siblings('.subcat-row').slideDown(500);
            $(this).children('.drop-down-icon').attr('class', 'fa fa-toggle-up drop-down-icon');

        }else if($(this).children('i').hasClass('fa fa-toggle-up drop-down-icon')){

            $(this).closest('.category-row').siblings('.subcat-row').slideUp(500);
            $(this).children('.drop-down-icon').attr('class', 'fa fa-toggle-down drop-down-icon');

        }

    });
});

如果实际上使用类，因为看起来你想添加一个类来指示它已关闭，并且相同的用于向上，只需使用标准的 jQuery 类函数即 addClass, hasClass、removeClass 或 toggleClass，比使用attr

简单多了

$(document).ready(function(){ 
    $('.subcat-row').hide();

$("body").on("click",'.drop-subcat', function () {   
        var childi =  $(this).children('i');
        if(childi.hasClass('fa-toggle-down')){    
            $(this).closest('.category-row').siblings('.subcat-row').slideDown(500);    
        }else if(childi.hasClass('fa-toggle-up')){    
            $(this).closest('.category-row').siblings('.subcat-row').slideUp(500);    
        }
       childi.toggleClass('fa-toggle-up fa-toggle-down');    
    });
});

或者对于变量缓存，小代码的观点，利用三元运算符和通过字符串和方括号调用 javascript 方法，尝试以下

$(document).ready(function(){ 
    $('.subcat-row').hide();

$("body").on("click",'.drop-subcat', function () {   
        var self = $(this),
            childi = self.children('i'),
            slideDirection = childi.hasClass('fa-toggle-down') ? "slideDown":"slideUp";
        self.closest('.category-row').siblings('.subcat-row')[slideDirection](500);
        childi.toggleClass('fa-toggle-up fa-toggle-down');    
    });
});