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