Implementation is also very simple, but it should be noted that in the click of the display of events, you need to do to prevent the event bubbling processing, otherwise trigger the page click event. But there is also a disadvantage, that is, if the same page if there are events to prevent bubbling, you can not hide the div, so in such an event requires special treatment under: their own call to hide under the div (but normally this is not a lot of events);
Js:
Copy Code code as follows:
$ (document). Ready (function () {
Language Head Click event, display language list
$ (". language_selected"). Click (function (e) {
$ (". Language_list"). Toggle ();
E.stoppropagation (); Prevent event bubbling, or the event will bubble to the following document click event
});
Hide Language list when clicking on a document
$ (document). Click (function () {
$ (". Language_list"). Hide ();
});
When you click 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 code 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 code as follows:
<div style= "width:200px" >
<div class= "language_selected" >
Chinese (Simplified) </div>
<div class= "Language_list" >
<ul>
<li> Chinese (Simplified) </li>
<li>English</li>
</ul>
</div>
</div>
<div id= "nopopevent" style= "width:100px; height:100px; border:1px solid black; " >
Click me, do not hide the language list, need to display div yourself
</div>
