Anonim

Jei programuojate „Javascript“, tikriausiai susidūrėte su situacija, kai norite, kad meniu būtų atidaromi spustelėjus, o užsidarius, kai vartotojas paspaudžia už meniu. Aš sukūriau gana paprastą būdą tai padaryti. Pridedu renginio klausytoją prie dokumento turinio. Kai kas nors spustelėja, mes ieškome įvykio tikslo ID. Jei jis sutampa su dėžutės skyriaus ID, tada nieko nedarykite. Jei jo nėra, uždarykite meniu.

Žvelgiant šiek tiek toliau, neveiksminga palikti paspaudimų įvykio klausytoją visame kūne, kai jis nėra naudojamas. Tokiu atveju, jei meniu dar nebuvo atidarytas, nėra jokios priežasties klausytis paspaudimo už meniu ribų. Pridėkite įvykio klausytoją prie rodomos div. Tuo pačiu būdu, kai vėl paslėpta div, pašalinkite įvykio klausytoją.

Rodyti Div spustelėkite juodame langelyje, nieko neatsitiks. Spustelėkite lauke, jis išnyksta. $ ('# Showbox'). Spustelėkite (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ('# bigbox'). paslėpti (); }}

Taip pat įsitikinkite, kad į savo projektą įtraukėte „jQuery“, nes kai kurios aukščiau išvardytos funkcijos naudoja tą biblioteką.

Uždarykite skyrių arba meniu spustelėdami išorėje su „javascript“