Question

我只是编写一个小功能，通过淡入淡出来切换内容。

this.advancedSearch = function(fieldset, triggerBtn){
    fieldset.hide()
    triggerBtn.click(function(){
        fieldset.toggle(function(){ $(this).stop(false, true).fadeIn(300) }, function(){ $(this).stop(false, true).fadeOut(300) });
        return false;
    })
}

如果我使用toggle()它可以工作，但是当我插入这两个函数时没有任何反应并且没有抛出错误。我做错了什么？

Answer 1

我假设你打算使用triggerBtn触发fieldset上的toggle事件。

如果是这样，试试这个：

this.advancedSearch = function(fieldset, triggerBtn){
    fieldset.hide();
    triggerBtn.click(function(){
        fieldset.click();
    });
    fieldset.toggle(function(){ $(this).stop(false, true).fadeIn(300) }, 
                    function(){ $(this).stop(false, true).fadeOut(300) })
}

您拥有它的方式，每次点击triggerBtn时，您都将切换事件处理程序分配给fieldset。

修改

或者，如果您根本不需要fieldset上的点击（切换）事件，那么David的答案就可以了。

Answer 2

您希望将切换事件附加到要单击的对象：

this.advancedSearch = function(fieldset, triggerBtn) {
    fieldset.hide()
    triggerBtn.toggle(
        function(){ fieldset.stop(false, true).fadeIn(300) }, 
        function(){ fieldset.stop(false, true).fadeOut(300) }
    );        
}

Answer 3

toggle函数会在自动切换元素的元素上绑定一个click事件。因此，在按钮单击回调中调用切换不会切换元素，它只是绑定一个事件。手动实现这一点要简单得多，而不是使用切换。

this.advancedSearch = function(fieldset, triggerBtn){
    fieldset.hide()
    triggerBtn.click(function(){
        if(fieldset.hasClass('toggle-on')) {
            fieldset
                .removeClass('toggle-on')
                .stop(false, true).fadeOut(300);
        }
        else {
            fieldset
                .addClass('toggle-on')
                .stop(false, true).fadeIn(300);
        }
        return false;    
    })
}

简单的切换问题

3 个答案: