JS Code
$ (document). Ready (function() { //language Head Click event, display language list$ (". language_selected"). Click (function(e) {$ (". Language_list"). Toggle (); E.stoppropagation (); //block events from bubbling, otherwise events will bubble to the following document click Events}); //Hide Language list when you click a 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 Code
{ cursor: pointer;} { border: 1px solid black; display: none;} { cursor: pointer; border: 1px solid red;}
HTML code
<Divstyle= "width:200px"> <Divclass= "language_selected">Chinese (simp.)</Div> <Divclass= "Language_list"> <ul> <Li>Chinese (simp.)</Li> <Li>中文版</Li> </ul> </Div> </Div> <DivID= "Nopopevent"style= "width:100px; height:100px; border:1px solid black;">Click I, do not hide the list of languages, need to display div yourself</Div>
jquery Click somewhere else to hide the Div layer Implementation program