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

我有一个按钮来切换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();
   });
}

---

问题是每次运行

toggleMiniCart

时，它都试图添加一个单击功能。将click listener置于函数外部，并在click listener中引用它，如下所示：

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

---

我正在用它。我想问题在于我打电话的方式/地点这似乎起了作用，只是我不得不移除toggleMiniCart（）；在document.ready中的click事件之外。将其放在那里会导致迷你购物车在页面加载时打开。除此之外，下拉列表的图标没有更改$elem.addClass（'mini_cart_less'）；，但是我正在考虑这个问题。如果您在$（文档）中删除对toggleMiniCart（）的调用。准备好了吗？我可以接受这个。这会导致它在页面加载时切换。谢谢。@Judson已根据请求删除