Anonim

Jika Anda memprogram dalam Javascript, Anda mungkin menjalankan situasi di mana Anda ingin memiliki menu yang terbuka pada klik, dan yang menutup ketika pengguna mengklik di luar menu. Saya telah mengembangkan cara yang cukup sederhana untuk melakukan hal itu. Saya menambahkan pendengar acara ke badan dokumen. Ketika seseorang mengkliknya, kami mencari id target acara. Jika cocok dengan ID kotak div, maka jangan lakukan apa pun. Jika tidak, tutup menu.

Mengambil itu sedikit lebih jauh, itu tidak efisien untuk meninggalkan pendengar acara klik pada seluruh tubuh ketika sedang tidak digunakan. Dalam hal ini, jika menu belum dibuka, tidak ada alasan untuk mendengarkan klik di luar menu. Tambahkan pendengar acara di panggil balik div yang ditampilkan. Dengan nada yang sama, ketika div disembunyikan lagi, hapus pendengar acara.

Tampilkan Div Klik di dalam kotak hitam, tidak ada yang terjadi. Klik di luar, itu menghilang $ ('# showbox'). Klik (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;}); function boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('klik', boxCloser, false); $ ('# bigbox'). sembunyikan (); }}

Pastikan juga Anda memasukkan jQuery dalam proyek Anda karena beberapa fungsi di atas menggunakan pustaka itu.

Tutup div atau menu saat klik di luar w / javascript