Javascript click other places on the page to hide a certain displayed DIV _ javascript skills

Today, a friend asked me to click a button to bring up a DIV, and asked me to click other places on the page to hide this DIV implementation is also very easy, but note that in the Click Show event, you need to prevent event bubbling. Otherwise, the page Click Event is triggered. However, this method also has a disadvantage: if an event in the same page also prevents bubbling, The DIV cannot be hidden. Therefore, special processing is required for such an event: hide the DIV yourself (but normally there are not many such events );
JS:

The Code is as follows:

$ (Document). ready (function (){
// Click an event in the Language header to display the language list
$ (". Language_selected"). click (function (e ){
$ (". Language_list"). toggle ();
E. stopPropagation (); // prevents event bubbling. Otherwise, the event will bubble to the following document click event.
});
// Hide the language list when you click the document
$ (Document). click (function (){
$ (". Language_list"). hide ();
});
// When you click a language item in the language list, the selected item is updated and the language list is hidden.
$ (". Language_list li"). click (function (){
$ (". Language_selected"). text ($ (this). text ());
$ (". Language_list"). hide ();
});
$ ("# NoPopEvent"). click (function (e ){
E. stopPropagation ();
});
});

CSS:

The Code is as follows:

. Language_selected
{
Cursor: pointer;
}
. Language_list
{
Border: 1px solid black;
Display: none;
}
. Language_list li
{
Cursor: pointer;
Border: 1px solid red;
}

HTML:

The Code is as follows:

Chinese (simplified)

• Chinese (simplified)


• English

Click "I". The language list is not hidden. You need to display the DIV yourself.