jQuery .toggle requires double click to open when interupted by .click

I am having a problem with my toggle function. I have a simple div that moves up and down when clicked using the .toggle. To make the page easier etc to use I want the user to be able to click anywhere on the screen in order to 'close' move the div back down without having to click on the blue box again (sort of like on a mega dro开发者_JAVA技巧p down menu).

Problem is my .click function messes up the toggle and once the blue div is closed by the .click rather than the second function of the .toggle, the .toggle then needs to be clicked twice in order for it to be opened again. What am I doing wrong?

I have searched other related problems with .toggle and double clicks on here but with no luck in finding a similar topic

I have tried some .addClass and .hasClass stuff but it doesn't seem to be working.

Also here is my 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')
            });

});

Why not just change toggle to 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');
    }
});