slideToggle在從函數調用時向上滑動然後向下滑動

Question

我有一個切換div的按鈕。該功能是：

function toggleMiniCart() { 
$('#mini_cart_more').click(function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
     $('#mini_cart_dropdown').slideToggle('fast'); 
     if($('#mini_cart_dropdown').css('display') == 'none') { 
    $(this).addClass('mini_cart_less'); 
    $(this).removeClass('mini_cart_more'); 
     } 
     else { 
    $(this).removeClass('mini_cart_less'); 
    $(this).addClass('mini_cart_more'); 
    }     
    }) 
} 

我已經調用的函數像文件裝載：

$(document).ready(function() { 
    toggleMiniCart(); 
}); 

這工作得很好。但是，當我從另一個函數調用它並單擊#mini_cart_more時，div滑落，然後備份。

function add_to_cart() { 
    $('.add_to_cart').click(function() { 
     //do some ajax 
     toggleMiniCart(); 
    }); 
} 

Answer 1

的問題是，它試圖每個toggleMiniCart是運行時間增加點擊功能。將點擊監聽器放在函數之外，並將其引用到點擊監聽器中，如下所示：

function toggleMiniCart() { 
    $elem = $("#mini_cart_dropdown"); 
    $elem.slideToggle('fast'); 
    if($elem.css('display') == 'none') { 
     $elem.addClass('mini_cart_less'); 
     $elem.removeClass('mini_cart_more'); 
    } else { 
     $elem.removeClass('mini_cart_less'); 
     $elem.addClass('mini_cart_more'); 
    }     
} 
function add_to_cart() { 
    $('.add_to_cart').click(function() { 
     //do some ajax 
     toggleMiniCart(); 
    }); 
} 

$(document).ready(function() { 
    $('#mini_cart_more').click(function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     toggleMiniCart(); 
    }); 
});