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

从函数调用时，slideToggle向上然后向下滑动

1 个答案: