通过点击div外部隐藏jQuery [英] jQuery hide by clicking outside of div

问题描述

您好，

我试图做一个JavaScript动态显示图片。

I'm trying to make a JavaScript dynamic display of an image.

我的代码：

Here’s my code:

<div class="info_image_click" style="display: none;">
    <img src="slike/info_slika_click.jpg" />
</div><!--kraj info_image_click-->

<a href="javascript:void(null);">
    <div class="info_image" style="margin: 0px auto;">
        <img src="slike/info_slika.jpg"/>
    </div>
</a><!-- info slika -->

<script>
    $('.info_image').click(function () {
        $('.info_image_click').show();
    });
</script>

当有人点击info_image（小图片）时，会打开info_image_click
（这是大图）。
我不知道用户如何通过点击他所在的外部容器来隐藏info_image_click。
对不起我的英语：）

When someone clicks on "info_image" (that's the small picture) it opens the "info_image_click" (that's the large picture). I don't know how users can hide the "info_image_click" by clicking outside container in which he is. Sorry about my english :)

推荐答案

试试这个：

$('.info_image').click(function (e) {

    // Used to stop the event bubbling..
    e.stopPropagation()
    $('.info_image_click').show();
});

// Hide the "info_image_click" by clicking outside container
$(document).click(function () {
    $('.info_image_click').hide();
});

这篇关于通过点击div外部隐藏jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！