当被.click打断时，jQuery.thoggle需要双击才能打开

Question

我的切换函数有问题。我有一个简单的div，当使用.toggle单击时，它会上下移动。为了让页面更容易使用，我希望用户能够点击屏幕上的任何地方，以便"关闭"将div向下移动，而无需再次点击蓝色框(有点像在大型下拉菜单上(。

问题是我的.click函数混淆了切换，一旦.click而不是.toggle的第二个函数关闭了蓝色div，就需要单击.toggle两次才能再次打开它。我做错了什么？

我已经搜索了.toggle的其他相关问题，并双击此处，但没有找到类似的主题

我试过一些.addClass和.hasClass的东西，但似乎不起作用。

这里还有我的jQuery:

    $(document).ready(function(){

$(document).click(function() {
            if($("#banner").hasClass("open")){
                    $("#banner").removeClass("open").stop().animate({top:"350px"},350, 'swing')
            }});

$("#banner").toggle(
        function () {
            $(this).addClass("open").animate({top:"200px"},350, 'swing')
            },
        function () {
            $(this).removeClass("open").animate({top:"350px"},350, 'swing')
            });
});

Answer 1

为什么不将toggle更改为click:

$("#banner").click(function(e) {
    e.stopPropagation();
    if ($("#banner").hasClass("open")) {
        $("#banner").removeClass("open").animate({
            top: "350px"
        }, 350, 'swing')
    }
    else {
        $(this).addClass("open").animate({
            top: "200px"
        }, 350, 'swing');
    }
});