定位Div onClick，并在外部单击时隐藏

Question

我有一个明显隐藏的类.toggleBox 的div。单击input 时，我的JavaScript 可以显示.toggleBox div，但是如果单击.toggleBox div 之外的任何位置，我不确定如何再次隐藏该div。

我想根据当前状态以及点击是发生在.toggleBox 内部还是外部来切换该框，使其隐藏或显示。

这是一个小提琴http://jsfiddle.net/SJVz5/

这里是 HTML、JavaScript 和 CSS：

HTML：

<div class="container">
    <label for="myInput">Click in input</label>
    <input type="text" class="js-input" id="myInput" />
    <div class="toggleBox">
        Some information
    </div>
</div>

JavaScript：

$('.js-input').click(function() {
    $('.toggleBox').css({
        top : 22 + 'px',
        left : 91 + 'px'
    });
});

CSS：

.container {
    position: relative;
}

.toggleBox {
    position: absolute;
    top: -99999px;
    left: 99999px;
    padding: 15px;;
    border: 1px solid black;
}

Answer 1

我已经更新了你的脚本，请检查一下：http://jsfiddle.net/SJVz5/3/，我希望这是你想要的

你必须添加event.stopPropagation();

Answer 2

似乎我有点晚了，但我有一个更简单的答案，代码更短 http://jsfiddle.net/Godinall/SJVz5/4/

$('html').click(function () {
    $('.toggleBox').toggle().css({
        top: 22 + 'px',
        left: 91 + 'px'
    });
});

$('.toggleBox').click(function (event) {
    event.stopPropagation();
});