1

我有一个最初隐藏的 wrap 元素。单击隐藏元素后，需要添加一个可见类，然后才能在另一个元素上执行切换动画。然后再次单击，动画元素需要切换它的动画，然后从包装中删除所述类。

这是我到目前为止所拥有的。初始点击执行良好。添加类，并执行动画。但是再次单击时，动画会正确执行，但是一旦完成，该类就不会被删除。

$(document).ready(function () { 
$('.search-btn').click(function() {
    if ($('.search-form-wrap').hasClass('hidden')) {
        $('.search-form-wrap').addClass('visible', function() {
            $('.search-form').blindLeftToggle('slow'); 
        });
    }
    else {
        $('.search-form').blindLeftToggle('slow', function() {
            $('.search-form-wrap').removeClass('visible'); 
        });
    }
});
});

这似乎基于 Blazemonger 的代码工作，并添加了$('.search-form-wrap').hide();

$(document).ready(function () { 
$('.search-form-wrap').hide();
$('.search-btn').click(function() {
    if ($('.search-form-wrap').is(':hidden')) {
        $('.search-btn').toggleClass('active'); 
        $('.search-form-wrap').show();
        $('.search-form').blindLeftToggle('slow'); 
    } else {
        $('.search-form').blindLeftToggle('slow', function() {
            $('.search-form-wrap').hide();
        });
    }
});
});
4

1 回答 1

1

那是因为你正在测试它是否.hasClass('hidden')。如果您要添加/删除visible该类，则需要测试它是否是.not('.visible')。

更新

但是，如果您的意思是要在不使用类的情况下测试元素是隐藏还是可见，请使用:hiddenand:visible选择器而不是类：

$(document).ready(function () { 
    $('.search-btn').click(function() {
        if ($('.search-form-wrap').is(':hidden')) {
            $('.search-form-wrap').show();
            $('.search-form').blindLeftToggle('slow'); 
        } else {
            $('.search-form').blindLeftToggle('slow', function() {
                $('.search-form-wrap').hide();
            });
        }
    });
});
于 2012-12-05T14:27:47.070 回答