Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 09.03.2018, 00:26
irmen irmen ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard addClass und removeClass

Hallo, ich probiere jetzt schon geraume Zeit herum, aber ich stehe auf dem Schlauch ... kann mir bitte jemand draufhelfen, warum das hier nicht geht?

Kompliziert KANN es nicht sein!


Hier ist das Beispiel nachgebaut:

test

Bei Klick auf den roten Text, soll eine Ebene eingeblendet werden und der Text verändert. das geht auch soweit.
Und es soll beim erneuten Klick der Text wieder zurück geändert werden und die Ebene wieder zugeklappt werden.

Dazu habe ich beim aufklappbefehl die klasse "offen" per addClass hinzugefügt und die ursprüngliche "e-open" mit removeClass entfernt.
das geht auch.
Aber der zuklapp-Befehl mit dem selector auf die neue Klasse "offen", wird dann nur teilweise ausgeführt. Die Ebene wird zwar wiederzugeklappt, aber der Text ändert sich nicht zurück.


hier der Code der Seite:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
div{border:1px solid green; width:50%; position:relative; padding:60px 20%; background-color:#FC9;}
.english-text{width:50%; padding:30px 20%; display:none; position:relative;}
.english-text-close{width:60px; height:20px; color:red; position:absolute; top:5px; right:5px; cursor:pointer;}
.e-open, .offen{color:red; cursor:pointer; text-align: right;}
</style>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>

<body>
<div>aaaaaaaaaaaaaaaaa  a a aaaaaaaaaaaaa aa a aa   <br />
 aaaa aaa aa aaaaaaaaaaaaaa aaa aaa
 aaaaaaaaaaaaaaaaa  a a aaaaaaaaaaaaa aa a aa   <br />
 aaaa aaa aa aaaaaaaaaaaaaa aaa aaa
 aaaaaaaaaaaaaaaaa  a a aaaaaaaaaaaaa aa a aa   <br />
 aaaa aaa aa aaaaaaaaaaaaaa aaa aaa
 aaaaaaaaaaaaaaaaa  a a aaaaaaaaaaaaa aa a aa   <br />
 aaaa aaa aa aaaaaaaaaaaaaa aaa aaa</div>
<div class="e-open"><h3>klapp die verborgnene ebene auf und ändere deinen eigenen text</h3></div>
<div class="english-text">
dögkldjfögkjöl dlgkjd jkldfg<br />
gjdflgk jdg <br />
 ldfgj dfg <br />
  dlfgjk dg <br />
  dfg jdfg dlg <br />
  dfg djfg <br />
  dfg dfkjg dlkfg <br />
</div>

<script language="javascript" type="text/javascript">
		$(document).ready(function() {				
$(".e-open").click(function(){
        $(".english-text").slideToggle("slow");
		$(this).html('<h3>klapp wieder zu und ändere deinen text zurück x</h3>'); 
		$(this).addClass('offen');
		$(this).removeClass('e-open');
}); 
$(".offen").click(function(){
        $(".english-text").slideToggle("slow");
		$(this).html('<h3>klapp die verborgnene ebene auf und ändere deinen eigenen text</h3>'); 
		$(this).addClass('e-open');
		$(this).removeClass('offen');
}); 
			
		<!--abschlussklammer-->	
		});

	</script>  
</body>
</html>
Vielen Dank für eure Hilfe!!

Geändert von irmen (09.03.2018 um 00:28 Uhr)
Mit Zitat antworten
Sponsored Links