dropdown schließen (jQuery)

[danaris]

Hallo!

Habe ein DropDown-Menü gebaut:

  
$('.dropdown').click(function () {  
   $('div',this).toggle();  
});  

Obiger Code schaltet zwischen sichtbar/unsichtbar einer untergeordneten div-Box hin und her:

<div class="dropdown">
Hier klicken
<div>Menü</div>
</div>

Das klappt soweit wunderbar.
Mir fällt aber immer wieder auf, dass auf anderen Seiten die DropDowns sich wieder schließen sobald man irgendwoanders hinklickt.

Wie könnte man das in meinem Beispiel hinzufügen?

[Ole]

Hi

Wie könnte man das in meinem Beispiel hinzufügen?

evtl. funktioniert es mit blur().

Gruß
Ole

[Gernot Back]

Hallo Ole, hallo danaris,

evtl. funktioniert es mit blur().

Wohl kaum, denn ein mit DIV-Elementen nachgebautes Dropdown kennt ja weder einen Blur- noch ein Focus-Event. Anders wäre das, wenn es über A-Elemente oder Formularelemente nachgebaut wäre.

Ich würde also den Klick-Event auf dem ganzen Dokument abfangen und das Dropdown dann schließen. Da das Dropdown aber selbst Teil des Dokuments ist, muss das Event-Bubbeling unterbunden werden.

Mit jQuery sähe das dann z.B. so aus:

  
$(document).ready(function() {  
	$(document).click(function () {  
		$('.dropdown div').hide();  
	});  
	  
	$('.dropdown').click(function (e) {  
		e = e || window.event;  
		if(e.stopPropagation) {  
			e.stopPropagation();  
		} else {  
			e.cancelBubble = true;  
		}  
		$('div',this).toggle();  
	});  
});  

Gruß Gernot