jquery - 如何显示/隐藏元素onclick jquery

Question

我想显示 anchor 的某个div onclick，然后我想再次隐藏 anchor 的div onclick，这是我的代码:

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) // ... nor a descendant of the container
        {
            container.hide();
        }
    });

html:

<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>

div 在点击时成功显示，但不会再次隐藏。问题是由第二个函数引起的，该函数在用户单击容器外部时隐藏了容器。

Answer 1

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

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

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

http://codepen.io/damianocel/pen/avjVGQ

我已经注释掉了一个，你试试看你最喜欢哪一个