Question

我有一个明显隐藏的班级.toggleBox的div。点击input我的JavaScript可以显示.toggleBox div，但如果点击.toggleBox div之外的任何地方，我不知道如何再次隐藏div。

我想切换框，以便隐藏或显示该框，具体取决于它的当前状态以及点击是否发生在.toggleBox内或其外部。

这是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();
});

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

2 个答案: