jQuery的 - 与显示/隐藏/点击功能

Question

我不知道我有多好remaked这个代码，但最大的问题问题是这样的：

当我点击菜单项我，不是黑盒都出现。当我点击白色空间/背景或其他地方时，比盒子消失。当我点击第二个菜单项时（当第一个菜单项被激活时），与第一个菜单项（黑色框）应该消失并且第二个菜单项应该被激活是合理的。但是，当我点击第二个菜单项时，两个黑匣子被激活。

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

感激添加以下在两个click事件的开始，以清除任何可见的聊天下降的元素。

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