The implementation is also very simple, but it should be noted that in the event displayed by clicking, You need to block event bubbling processing, otherwise the page Click Event will be 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:
Copy codeThe 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:
Copy codeThe 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 codeThe Code is 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 "I". The language list is not hidden. You need to display the DIV yourself.
</Div>