0

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

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

谢谢

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

4 回答 4

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/

于 2013-09-11T15:53:00.780 回答
0

您必须将代码mouseup放在document. 您执行此操作的方式，用于在页面加载时执行的代码并用于为undefinedvariable抛出错误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();
        }
    });

请参阅工作示例。

于 2013-09-11T15:52:27.543 回答
0

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

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

在这里看小提琴。

于 2013-09-11T15:53:18.833 回答
0

另一种方式！

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/

于 2013-09-11T16:06:23.270 回答