Έχω κάποια μενού HTML, τα οποία εμφανίζω πλήρως όταν ο χρήστης κάνει κλικ στην κεφαλή αυτών των μενού. Θα ήθελα να αποκρύψω αυτά τα στοιχεία όταν ο χρήστης κάνει κλικ έξω από την περιοχή των μενού'.
Είναι κάτι τέτοιο δυνατό με την jQuery;
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
ΣΗΜΕΙΩΣΗ: Η χρήση της μεθόδου
stopEventPropagation()
είναι κάτι που πρέπει να αποφεύγεται, καθώς διακόπτει την κανονική ροή συμβάντων στο DOM. Δείτε αυτό το άρθρο για περισσότερες πληροφορίες. Εξετάστε τη χρήση αυτής της μεθόδου αντ' αυτού
Επισυνάψτε ένα συμβάν κλικ στο σώμα του εγγράφου το οποίο κλείνει το παράθυρο. Επισυνάψτε ένα ξεχωριστό συμβάν κλικ στο δοχείο το οποίο σταματά τη διάδοση στο σώμα εγγράφου.
$(window).click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
Έχω μια εφαρμογή που λειτουργεί παρόμοια με το παράδειγμα του Eran's, εκτός από το γεγονός ότι συνδέω το συμβάν κλικ στο σώμα όταν ανοίγω το μενού... Κάπως έτσι:
$('#menucontainer').click(function(event) {
$('html').one('click',function() {
// Hide the menus
});
event.stopPropagation();
});
Περισσότερες πληροφορίες σχετικά με τη συνάρτηση one()
της jQuery's
Ελέγξτε τον στόχο του συμβάντος κλικ του παραθύρου (θα πρέπει να διαδίδεται στο παράθυρο, εφόσον δεν έχει καταγραφεί οπουδήποτε αλλού) και βεβαιωθείτε ότι δεν πρόκειται για κάποιο από τα στοιχεία του μενού. Εάν δεν είναι, τότε βρίσκεστε εκτός του μενού σας.
Ή ελέγξτε τη θέση του κλικ και δείτε αν αυτό'περιέχεται στην περιοχή του μενού.