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

问题描述

我有一个div .toggleBox ，可见被隐藏。当点击一个输入我的JavaScript可以显示 .toggleBox div，但我不知道如何隐藏div如果单击 .toggleBox div之外的任何位置。

I have a div with class .toggleBox that is visibly hidden. When clicking on an input my JavaScript can show the .toggleBox div, but I am not sure how to hide the div again if clicking anywhere outside of the .toggleBox div.

我想切换框，以隐藏或显示，取决于它的当前状态以及 .toggleBox 或以外。

I would like to toggle the box so that it is hidden or shown depending on it's current state and whether the click occured inside .toggleBox or outside of it.

这里是一个小提琴

这里是HTML，JavaScript和CSS：

Here is the HTML, JavaScript, and 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：

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;
}




推荐答案

请检查一下：，我希望它是您要

i have updated your script , please check this out : http://jsfiddle.net/SJVz5/3/, i hope it's that you want

必须添加 event.stopPropagation（）;

这篇关于位置Div onClick，并在外部单击时隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！