Question

直到现在我可以抓住图像的src并将其显示在固定的分区中，有点像弹出窗口。但是我想在div外部单击鼠标时隐藏div元素。请指导我如何操作，如果我的代码可以改进，请纠正我。谢谢！

JS：

$(document).ready(function () {
    $(".pic").hide();
    $(".screen").click(function () {
        display($(this));
    });
});

function display($this) {
    var source = $("img", $this).attr("src");
    $(".pic img").attr("src",source);
    $(".pic img").css("width","450px");
    $(".pic").show();
}

HTML：

            <div id="album">
                <div class="pic">
                    <img src="" />
                </div>

                <div class="screen">
                    <h1 class="title">Photo 1</h1>
                    <img src="images/1 png.png" class="image" />
                    <p class="description">This is a description</p>
                </div>

                <div class="screen">
                    <h1 class="title">Photo 1</h1>
                    <img src="images/2 png.png" class="image" />
                    <p class="description">This is a description</p>
                </div>
                <span class="clear_left"></span>

            </div>

Answer 1

可以使用jquery的模糊事件

$(".screen").bind('blur',function () {
    hide($(this));
});

function display($this) {
    $(".pic").hide();
}

Answer 2

试试这个

$(document).click(function () {
    if ($(this).class != "pic") {
        $(".pic").hide();
    }
});

Live Demo

如何在元素外部单击时使用jquery隐藏元素

2 个答案: