0

我不知道我重新制作这段代码的效果如何，但最大的问题是：

当我点击菜单项时，会显示黑框。当我点击空白/背景或其他地方时，框消失了。可以合理地假设，当我单击第二个菜单项（当第一个菜单项被激活时）时，第一个菜单项（黑框）应该消失，并且应该激活第二个菜单项。但是，当我单击第二个菜单项时，两个黑框都被激活。

$(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 回答