javascript - 定位Div onClick，点击外部时隐藏

Question

我有一个明显隐藏的类 .toggleBox 的 div。单击 input 时，我的 JavaScript 可以显示 .toggleBox div，但我不确定如果单击 .toggleBox 以外的任何地方，如何再次隐藏 div 分区。

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

这是一个 fiddle 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();