✔ Toggle Skript schließt sich?

[nordi]

Hallo, ich hab ein Problem mit meinem Toggleskript. Innerhalb der DIV's, die sich einblenden, befinden sich Links. Wenn man auf diese klickt, schließt sich automatisch der DIV. Kann man das ausstellen? Ich hätte gerne, dass der DIV offen bleibt, wenn man einen Link anklickt.

Hier das Skript:

 $('#toggle-view li').click(function () {
		     var text = $(this).children('p');
			 if (text.is(':hidden')) {text.slideDown('200');$(this).children('span').html('-');} else 
			 {text.slideUp('200');$(this).children('span').html('+');}});});

 

[Quaese]

Hi,

verhinder mit Hilfe der Methode stopPropagation des Event-Objekts das Weiterreichen des click-Ereignisses, wenn auf einen Link innerhalb des zu "schützenden" Bereichs geklickt wird.

Beispiel:

$('#toggle-view li a').click(function(evt){
  evt.stopPropagation();
});

Ciao
Quaese

 

[nordi]

ah super! Vielen Dank! Das klappt super! Das DIV schließt sich aber auch, wenn man einfach innerhalb des DIVs klickt? WIe wird das verhindert?

 

[Quaese]

Hi,

du kannst dir zum Beispiel eine Routine schreiben, die das Weiterreichen des Ereignisses für alle Elemente unterbindet, die nicht auf das Event reagieren sollen.

Beispiel:

$('#toggle-view li *').click(function(evt){
  if(evt.target.nodeName.toUpperCase() != "SPAN")
    evt.stopPropagation();
});

Ciao
Quaese

 

[nordi]

Hi, danke für die schnelle Antwort. Also, ich hab deinen Code eingefügt und die DIVS schließen sich immer noch wenn man in sie hineinklickt. Ich bin mir aber auch nicht sicher, ob ich es richtig gemacht habe. Vielleicht kann man den ganzen Code auch optimieren Hab da alles irgendwie zusammengeschrieben.

			 $('#toggle-view li').click(function () {
		     var text = $(this).children('p');
			 if (text.is(':hidden')) {text.slideDown('200');$(this).children('span').html('-');} else 
			 {text.slideUp('200');$(this).children('span').html('+');}});
			 $('#toggle-view li a').click(function(evt){
 			 evt.stopPropagation();
			 $('#toggle-view li *').click(function(evt){
  			if(evt.target.nodeName.toUpperCase() != "SPAN")
  			  evt.stopPropagation();
});

 

[Quaese]

Hi,

wie sieht denn das zugehörige HTML-Fragment aus?

Ciao
Quaese

 

[nordi]

http://www.stokedesign.de Da kannst du dir das mal angucken, was ich meine

 

[Quaese]

Hi,

meinen zweiten Vorschlag kann ich in deiner Online-Variante nicht erkennen.

Aber OK, ersetze folgendes

$('#toggle-view li a').click(function(evt){
  evt.stopPropagation();
});

durch

$('#toggle-view li *').click(function(evt){
  //if((evt.target.nodeName.toUpperCase() != "SPAN") && (evt.target.nodeName.toUpperCase() != "H3")){
  if($(evt.target).hasClass('tip') || ((evt.target.nodeName.toUpperCase() != "SPAN") && (evt.target.nodeName.toUpperCase() != "H3"))){
    evt.stopPropagation();
  }
});

Jetzt sollte sich der geöffnete Bereich nur noch durch Klicken auf die Überschrift (H3) oder auf den SPAN schliessen lassen.

Probleme machen hier IEs vor Version 8. Um die Funktionalität dort ebenfalls zu gewährleisten, müssen die Elemente, die einem LI-Tag untergeordnet sind, mit Layout versehen werden. Für den IE 7 reicht eine CSS-Regel innerhalb eines bedingten Kommentars, in der z.B. eine minimale Breite angegeben wird. Für niedrigere Versionen musst du einfach mal ausprobieren (z.B. height: 1%).

<!--[if IE 7]>
<style type="text/css">
#toggle-view li *{
  min-width: 1%;
}
</style>
<![endif]-->

[EDIT]
Ich habe gesehen, dass du im HTML-Code weitere SPAN-Tags verwendest. Aus diesem Grund musste die if-Bedingung angepasst werden. Die vorherige habe ich lediglich auskommentiert, um es nachvollziehen zu können.
[/EDIT]

Ciao
Quaese

 

[nordi]

danke, hat bestens funktioniert!!