0

このコードをどれだけうまく作り直したかはわかりませんが、最大の問題は次のとおりです。

メニュー項目をクリックすると、ブラック ボックスが表示されます。空白/背景または他の場所をクリックすると、ボックスが消えました。2 番目のメニュー項目 (最初のメニュー項目がアクティブなとき) をクリックすると、最初のメニュー項目 (ブラック ボックス) が消え、2 番目のメニュー項目がアクティブになるはずです。ただし、2 番目のメニュー項目をクリックすると、両方のブラック ボックスがアクティブになります。

$(document).ready(function () {
$('#icons').click(function () {
        if ($('#chat-drop').is(":visible")) {
            $('#chat-drop').hide()
        $('#rodyti').removeClass('active');
        } else {
            $('#chat-drop').show()
        $('#rodyti').addClass('active');
        }
    return false;
});

完全なコード: http://jsfiddle.net/wW75v/4/

どんな助けにも感謝します

4

2 に答える 2

1

両方のクリック イベントの先頭に次を追加して、表示されているチャット ドロップ要素をクリアします。

http://jsfiddle.net/wW75v/5/

$('#chat-drop,#chat-drop2').hide()

したがって、これは次のようになります。

$(document).ready(function () {
    $('#icons').click(function () {
        $('#chat-drop,#chat-drop2').hide(); //Add
        if ($('#chat-drop').is(":visible")) {
            $('#chat-drop').hide()
            $('#rodyti').removeClass('active');
        } else {
            $('#chat-drop').show()
            $('#rodyti').addClass('active');
        }
        return false;
    });


    $('#icons2').click(function () {
        $('#chat-drop,#chat-drop2').hide(); //Add
        if ($('#chat-drop2').is(":visible")) {
            $('#chat-drop2').hide()
            $('#rodyti2').removeClass('active');
        } else {
            $('#chat-drop2').show()
            $('#rodyti2').addClass('active');
        }
        return false;
    });



    $('#chat-drop').click(function (e) {
        e.stopPropagation();
    });
    $(document).click(function () {
        $('#chat-drop').hide();
        $('#rodyti').removeClass('active');
    });


    $('#chat-drop2').click(function (e) {
        e.stopPropagation();
    });
    $(document).click(function () {
        $('#chat-drop2').hide();
        $('#rodyti2').removeClass('active');
    });

});
于 2013-04-20T20:47:11.827 に答える
0

これを試して ：

$('#icons').click(function () {
    if ($('#chat-drop').is(":visible")) {
        $('#chat-drop').hide()
    $('#rodyti').removeClass('active');
    } else {
        $('#chat-drop').show()
    $('#rodyti').addClass('active');
        $('#chat-drop2').hide()
        $('#rodyti2').removeClass('active');
    }
return false;
});


$('#icons2').click(function () {
        if ($('#chat-drop2').is(":visible")) {
            $('#chat-drop2').hide()
        $('#rodyti2').removeClass('active');
        } else {
            $('#chat-drop2').show()
        $('#rodyti2').addClass('active');
                        $('#chat-drop').hide()
        $('#rodyti').removeClass('active');
        }
    return false;
});
于 2013-04-20T20:50:58.883 に答える