Hi, 

in the language menu shown below, I would like to show the "current_menu" when
it's not visible and clicking on the "current_page" element, and to hide it when
clicking everywhere except in the "current_menu" element.
I tried with the "not" selector:


         

          
$(":not(#current_menu)").bind('mousedown',function(event) {
          
 $("#current_menu").hide();
          
 event.stopPropagation();
          
});
         

I expected it to be "bind this event to all elements except "current_menu",
but the event is still triggered when clicking on the menu because
it seems that the parents are selected.

Anybody can help?
thanks


My code


HTML

1. <div id="lang" >
2. <div id="current_page"></div>
3. <div id="current_menu">
4. <ul><li id="en"><a href="">en</a></li>
5. <li id="fr"><a href="">fr</a></li>
6. <li id="es"><a href="">es</a></li>
7. </ul>
8. </div>
9. </div>

jQuery

1. $("#current_menu").hide();           
2. $("#current_page a").click( function() {
3.     if( $("#current_menu").is(":visible") ) {                  
4.         $("#current_menu").hide();
5.         return false;
6.     }
7.     else {
8.         $("#current_menu").css('visibility','visible');                
9.         $("#current_menu").show();
10.         return false;
11.      }
12. });
 
13. $("#current_menu li").mousedown(function(event){
14.     event.preventDefault(); //prevent synchronous loading
15.     $.post("/i18n/setlang/", { language: $(this).text(), next: "{{request.path}}" }, function(data) {
16.         top.location.href="{{request.path}}"; //redirection
17.     });
18.     $("#current_page").html($(this).text());
19.     $("#current_menu").hide();
20. });