Question

我不知道我重新编写这段代码有多好，但最大的问题是：

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

$(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/

我将不胜感激任何帮助

Answer 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');
    });

});

Answer 2

试试这个：

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

jQuery - show / hide / click功能的问题

2 个答案: