0

ユーザーがページのどこか他の場所をクリックしたときにセカンダリ画像を非表示にしたいので、jfiddleを見ると、ユーザーがブラックボックスの外側をクリックすると、ブラックボックスが再び赤くなります。

このソースから隠しコードを取得しました: Use jQuery to hide a DIV when the user click 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();
    }
});
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

別の方法！

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 に答える
0

mouseupのイベントにコードを配置する必要がありますdocument。undefinedあなたがしていた方法では、ページがロードされたときに実行され、 variableのエラーをスローするために使用されていたコード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

トグルしている 2 つの要素の上にある何かのクリックを処理する必要があります。そうしないと、それをキャッチできません。

$(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 に答える