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

我有一个类为

.toggleBox

的div，它明显隐藏了。单击

输入时，我的JavaScript可以显示
.toggleBox
div，但如果单击
.toggleBox
div之外的任何位置，我不确定如何再次隐藏div

我想切换该框，使其隐藏或显示，这取决于它的当前状态以及单击是发生在
.toggleBox
内部还是外部

这是一把小提琴

以下是HTML、JavaScript和CSS：

HTML:

CSS:

我已经更新了你的脚本，请检查这个：，我希望这是你想要的

您必须添加
event.stopPropagation（）
我似乎有点晚了，但我有一个更简单的答案，代码更短

像这样吗？几乎，如果在
.toggleBox
div中单击，它不应该再次被隐藏。这非常有效！我不知道事件。stopPropagation（）。我可以问一下，为什么
切换框
有一个.click（）方法包含
$（this）.show（）
？既然它已经显示出来了，那么它可以被删除还是我遗漏了什么？非常感谢你！非常感谢。我只是在评论，不熟悉
event.stopPropagation（）
。我在谷歌上搜索了一段时间，看到了一个名为
.toggle（）
的老jQuery方法，该方法可能对我有所帮助，但已被弃用。谢谢@Mdd您弄错了两个开关（）。一个是不推荐的，正如您所说的，它是一个方法（jqueryapi），另一个是显示/隐藏元素的动画效果，这正是最适合您需要的。请看这里，它仍然处于活动状态，您可以从演示中看出，因为您使用的是最新的JQuery库，显然演示是有效的！
<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>

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

.container {
    position: relative;
}

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

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

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