js click elsewhere on the page to hide a displayed DIV_javascript skills

The implementation is also very simple, but it should be noted that in the click display event, you need to prevent the event from bubbling, otherwise the click event of the page will be triggered. But this also has a disadvantage, that is, if there is an event on the same page that prevents bubbling, the DIV cannot be hidden, so special handling is required in such events: calling the hidden DIV yourself (but normally such an event does not Not much);
JS:

Copy code The code is as follows:

$(document ).ready(function() {
//Click event of the language header, display the language list
$(".language_selected").click(function(e) {
$(".language_list" ).toggle();
e.stopPropagation(); //Prevent event bubbling, otherwise the event will bubble to the following document click event
});
//Hide the language when clicking on the document List
$(document).click(function() {
$(".language_list").hide();
});
//When clicking a language item in the language list, Update the selected item and hide the language list
$(".language_list li").click(function() {
$(".language_selected").text($(this).text());
$(".language_list").hide();
});
$("#noPopEvent").click(function(e) {
e.stopPropagation();
});
});

CSS:

Copy code 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:

Copy code The code is as follows:

< div class="language_selected">
中文(简体)

• 中文(简体) )


• English

Click me, do not hide the language list, you need to display the DIV yourself