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')

这会将class属性设置为'fa fa-toggle-up drop-down-icon'，因此在if语句中使用是不对的（即不会返回布尔值）。我认为你的意思是测试类，所以使用hasClass代替（返回一个布尔值，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');    
    });
});

Answer 2

请勿执行此操作：$(this).children('i').attr('class','fa fa-toggle-down drop-down-icon')，但请使用$(this).data()保存状态。

比较是否为元素设置某个类的最简单方法是$(this).is('.className')。

但我会使用.data()。

.slideUp（）无法正常工作

2 个答案: