Πρόβλημα με Clickable Drop-Down Menu σε jQuery

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
fusion
Δημοσιεύσεις: 146
Εγγραφή: 23 Αύγ 2008 21:34
Τοποθεσία: Λάρισα
Επικοινωνία:

Πρόβλημα με Clickable Drop-Down Menu σε jQuery

Δημοσίευση από fusion » 11 Απρ 2010 18:47

Θέλω να κάνω ένα menu που να λειτουργεί όπως οι καρτέλες στα desktop applications.

[1] O χρήστης κλικάρει στο menu και εμφανίζεται το submenu
[2] Με δεύτερο κλικ εξαφανίζεται
[3] Με ένα κλικ, ο χρήστης μπορεί να πλοηγηθεί και στo υπόλοιπο navigation (να μην χρειάζεται να κάνει ξανά κλικ για να ανοίξει το submenu "Παιχνίδια" στο παράδειγμα μας)
[4] Πατώντας οπουδήποτε αλλού το submenu να εξαφανίζεται

Έχω καταφέρει το [1] και το [4], δείτε το demo.
Υπάρχουν βέβαια κάποια bugs.
Για παράδειγμα, όταν εξαφανίζεται το submenu θέλω να παραμένει το βελάκι.
Και ένα άλλο minor-bug, πριν αφήσω το κλικ εξαφανίζεται για λίγο το βελάκι.
Προφανώς κάπου έχασα την μπάλα. :D

Javascript

Κώδικας: Επιλογή όλων

$(function(){
				var sub_nav = $("ul.subnav").parent().children("a");
				
				sub_nav.append&#40;"<span></span>"&#41;.css&#40;"padding-right", "27px"&#41;
					.click&#40;function&#40;e&#41;&#123; 
						e.preventDefault&#40;&#41;;
						sub_nav.removeClass&#40;"clicked"&#41;.removeClass&#40;"over"&#41;.parent&#40;&#41;.find&#40;"ul.subnav"&#41;.hide&#40;&#41;;
						$&#40;this&#41;.addClass&#40;"clicked"&#41;.addClass&#40;"over"&#41;.parent&#40;&#41;.find&#40;"ul.subnav"&#41;.show&#40;&#41;;  
					
					$&#40;this&#41;.parent&#40;&#41;.focusout&#40;function&#40;&#41;&#123; 
						$&#40;this&#41;.parent&#40;&#41;.find&#40;"ul.subnav"&#41;.hide&#40;&#41;.parent&#40;&#41;.find&#40;"a"&#41;.removeClass&#40;"clicked"&#41;.removeClass&#40;"over"&#41;; 
					&#125;&#41;;
					
				&#125;&#41;;
				
				sub_nav.hover&#40;function&#40;&#41; &#123;  
					$&#40;this&#41;.addClass&#40;"over"&#41;;
				&#125;, function&#40;&#41;&#123;
					if&#40;! $&#40;this&#41;.hasClass&#40;"clicked"&#41;&#41;&#123;
						$&#40;this&#41;.removeClass&#40;"over"&#41;;
					&#125;;
				&#125;&#41;;
				
			&#125;&#41;;
Όλος ο κώδικας html-css-jquery είναι στο demo.
Τελευταία επεξεργασία από το μέλος fusion την 18 Απρ 2010 16:28, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
fusion
Δημοσιεύσεις: 146
Εγγραφή: 23 Αύγ 2008 21:34
Τοποθεσία: Λάρισα
Επικοινωνία:

Πρόβλημα με Clickable Drop-Down Menu σε jQuery

Δημοσίευση από fusion » 18 Απρ 2010 16:05

up! :)

sibas
Honorary Member
Δημοσιεύσεις: 1853
Εγγραφή: 21 Φεβ 2003 01:21
Τοποθεσία: Μια εδώ.. Μια εκεί.. Σήμερα είμαι εδώ!!!
Επικοινωνία:

Πρόβλημα με Clickable Drop-Down Menu σε jQuery

Δημοσίευση από sibas » 18 Απρ 2010 16:19

cool 8) :D :D :D

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης