你的代码有效。我已经添加了两个其他的解决方案，无论如何：

jQuery('.mycart').click(function(e){

    e.preventDefault();
    $(".basket").slideToggle(800);
});

http://codepen.io/damianocel/pen/avjVGQ
我已经评论了一个，只是试着看看你最喜欢哪一个。

在jQuery中使用此代码

$('.mycart').click(function() {
   if($('.basket').is(':visible')) {
       $('.basket').hide()
   }
  else {
       $('.basket').show()
  }
})

我找到了解决方案，只是通过阻止mouseup（）函数来隐藏容器，如果点击的目标是锚$('.mycart')，所以当用户点击这个锚时，这个锚的click（）函数将正常应用并隐藏容器，如果它显示的话，这是新的jquery：

jQuery('.mycart').click(function(e){

        e.preventDefault();
        var target = jQuery(".basket");

        if(target.is(':visible'))
            jQuery('.basket').css('cssText', 'display: none !important');

        else
            jQuery('.basket').css('cssText', 'display: block !important');
    });

    jQuery(document).mouseup(function (e){
        var container =jQuery(".basket");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0 && !jQuery('.mycart').is(e.target)) // ... nor a descendant of the container or .mycart anchor
        {
            container.hide();
        }
    });

试试这个...

jQuery('.mycart').click(function(e) {
    e.preventDefault();
    var target = jQuery('.basket');
    if(target.is(':visible')) {
        jQuery('.basket').css('cssText', 'display: none !important');
    } else {
        jQuery('.basket').css('cssText', 'display: block !important');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="cart mycart" href="#">My Cart</a>
<div class="basket">
    <span class="callout-arrow"></span>
    <div class="basketcount"><span>5</span></div>
    <button type="button" class="checkoutbtn">checkout</button>
</div>