jQuery - removeClass 无法正常工作

Question

我不知道如何更改代码，removeClass 函数可以完成他的工作。目前，此功能不起作用（我认为是这样）。最大的问题是这样的：

当我单击菜单项“1”时，出现黑框，菜单项“1”文本颜色变为蓝色。可以合理地假设，当我单击菜单项“2”时，第一个菜单项“1”颜色变为黑色（不是蓝色），第二个菜单项“2”颜色变为蓝色。然而，他们都是忧郁的。

一小部分代码：

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

完整代码：http://jsfiddle.net/wW75v/9/

如果有任何帮助，我将不胜感激

Answer 1

只是一个建议，您可以使用class 代替id。它会减少您的代码，例如：

来自

<div id="icons">
    <div id="rodyti">1</div>
    <div id="chat-drop">Menu1</div>
</div>
<div id="icons2">
    <div id="rodyti2">2</div>
    <div id="chat-drop2">Menu2</div>
</div>

收件人：

<div class="icons">
    <div class="rodyti">1</div>
    <div class="chat-drop">Menu1</div>
</div>
<div class="icons">
    <div class="rodyti">2</div>
    <div class="chat-drop">Menu2</div>
</div>

JS 代码来自

$('#icons').click(function () {
    $('#chat-drop,#chat-drop2').hide()
    // Your code here..
    return false;
});


$('#icons2').click(function () {
    $('#chat-drop,#chat-drop2').hide()
    // Your code here..
    return false;
});

就这个

$('.icons').click(function () {
    $('.chat-drop').hide()
    // Your code here..
    return false;
});

Answer 2

您的问题似乎是当#chat-drop is(":visible") 时您正在执行removeClass()，但如果因为您刚刚在前面隐藏了#chat-drop行。

您可以将 removeClass() 添加到 rodyti 和 rodyti2 以便始终删除它们。但请注意，如果您在其上方触发 hide()，则 is(":visible") 将毫无用处。