简单的切换问题

时间:2010-04-30 16:53:13

标签: jquery

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

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()它可以工作,但是当我插入这两个函数时没有任何反应并且没有抛出错误。我做错了什么?

3 个答案:

答案 0 :(得分:3)

我假设你打算使用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的答案就可以了。

答案 1 :(得分:3)

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

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

答案 2 :(得分:1)

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