Question

当用户点击页面某处的任何其他位置时，我想要隐藏次要图像，因此，如果您查看jfiddle，用户在黑匣子外部点击后，黑框应该再次变为红色。

我从这个来源获得了隐藏代码：Use jQuery to hide a DIV when the user clicks outside of it。

由于

HTML：

<img id="language_arrow_bottom" src="http://placehold.it/32/ff0000" width="13px" height="13px" alt="" />
<img id="language_arrow_up" src="http://placehold.it/32/000000" width="13px" height="13px" alt="" style="display:none;" />

JS：

$(document).ready(function ()
{
    $('#language_arrow_bottom').click(function(event)
    {
        $('#language_arrow_bottom').hide();
        $('#language_arrow_up').show();
    });

    $('#language_arrow_up').click(function(event)
    {
        $('#language_arrow_up').hide();
        $('#language_arrow_bottom').show();
    });

    var container = $('#language_arrow_up');

    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
        container.hide();
        $('#language_arrow_bottom').show();
    }
});

Answer 1

$(document).ready(function() {
    $('#language_arrow_bottom').click(function(event) {
        $('#language_arrow_bottom').hide();
        $('#language_arrow_up').show();
        event.stopPropagation();
    });
    $(document).click(function(event) {
        $('#language_arrow_up').hide();
        $('#language_arrow_bottom').show();
    });
});

http://jsfiddle.net/5sjvj/2/

Answer 2

您必须将mouseup事件上的代码放在document上。您执行此操作的方式，用于在页面加载时执行的代码，用于为undefined变量e引发错误。

我所做的就是使用$(document).mouseup(function (e) { ... }中的相同代码并且它有效。现在，每当您单击鼠标并离开它，即鼠标按钮出现时，将调用此方法。

 $(document).mouseup(function (e) {
        var container = $('#language_arrow_up');

        if (!container.is(e.target) && container.has(e.target).length === 0) {
            container.hide();
            $('#language_arrow_bottom').show();
        }
    });

见工作example。

Answer 3

你需要处理你正在切换的两个元素之上的点击，否则你将无法捕捉它。

$(document).ready(function ()
{
    $(document).click(function(e) {
        console.log(e.target);

        if(e.target === $("#language_arrow_bottom")[0]) {
            $("#language_arrow_up").show();
            $("#language_arrow_bottom").hide();
        } else if(e.target !== $("#language_arrow_up")[0]) {
            $("#language_arrow_up").hide();
            $("#language_arrow_bottom").show();
        }
    });
});

See fiddle here

Answer 4

另一种方式！

HTML：

<div class="arrow"></div>

的CSS：

.arrow {
    background-image: url('http://placehold.it/32/ff0000');
    height: 13px;
    width: 13px;
}
.arrow.down {
    background-image: url('http://placehold.it/32/000000');
}

JS：

$(document).ready(function () {
    var $arrow = $('.arrow');

    $arrow.on('click', function (e) {
        e.stopPropagation();

        $arrow.toggleClass('down');

        if ($arrow.hasClass('down')) {
            //down
        } else {
            //up
        }
    });

    $(document).on('click', function () {
        $arrow.removeClass('down');
    });
});

http://jsfiddle.net/5sjvj/8/

单击辅助元素外部后显示原始元素

4 个答案: