Hvis du programmerer i Javascript, har du sannsynligvis kjørt over situasjonen der du vil ha menyer som åpnes med et klikk, og som lukkes når brukeren klikker utenfor menyen. Jeg har utviklet en ganske enkel måte å gjøre nettopp det på. Jeg legger til en begivenhetslytter til dokumentets kropp. Når noen klikker på det, ser vi etter begivenhetens mål-ID. Hvis det samsvarer med IDen til boksens div, gjør du ingenting. Hvis ikke, lukker du menyen.
Hvis du tar det litt videre, er det ineffektivt å forlate en klikkhendelseslytter på hele kroppen når den ikke brukes. I dette tilfellet, hvis menyen ikke har blitt åpnet ennå, er det ingen grunn til å lytte etter et klikk utenfor menyen. Legg til hendelseslytteren i tilbakeringingen av div som vises. På samme måte, når div blir skjult igjen, fjerner du lytteren.
Vis Div Klikk inne i den svarte boksen, ingenting skjer. Klikk utenfor, den forsvinner $ ('# showbox'). Klikk (funksjon () {$ ('# bigbox'). Vis (funksjon () {document.body.addEventListener ('klikk', boxCloser, falsk);}) ;}); funksjonsboksCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('klikk', boxCloser, falsk); $ ( '# Bigbox') skjule (.); }}
Forsikre deg også om at du inkluderer jQuery i prosjektet ettersom noen av funksjonene ovenfor bruker det biblioteket.
