Nếu bạn lập trình bằng Javascript, có lẽ bạn đã chạy trong tình huống bạn muốn có các menu mở khi nhấp và đóng khi người dùng nhấp bên ngoài menu. Tôi đã phát triển một cách khá đơn giản để làm việc đó. Tôi thêm một người nghe sự kiện vào cơ thể của tài liệu. Khi ai đó nhấp vào nó, chúng tôi sẽ tìm id mục tiêu của sự kiện. Nếu nó khớp với ID của div của hộp thì không làm gì cả. Nếu không, hãy đóng menu.
Nói xa hơn một chút, sẽ không hiệu quả khi để lại một trình lắng nghe sự kiện nhấp chuột trên toàn bộ cơ thể khi nó không được sử dụng. Trong trường hợp này, nếu menu chưa được mở, không có lý do gì để nghe tiếng click bên ngoài menu. Thêm người nghe sự kiện trong cuộc gọi lại của div đang được hiển thị. Trong cùng một hướng đó, khi div đang bị ẩn lần nữa, hãy loại bỏ trình lắng nghe sự kiện.
Hiển thị Div Click bên trong hộp đen, không có gì xảy ra. Nhấp vào bên ngoài, nó biến mất $ ('# showbox'). Click (function () {$ ('# bigbox'). Show (function () {document.body.addEventListener ('click', boxCloser, false);}) ;}); hàm boxCloser (e) {if (e.target.id! = 'bigbox') {document.body.removeEventListener ('click', boxCloser, false); $ ('# bigbox'). ẩn (); }}
Ngoài ra, hãy đảm bảo bạn bao gồm jQuery trong dự án của bạn vì một số chức năng ở trên sử dụng thư viện đó.
