Menu déroulant et qui se ré enroule[Jquery]

pour changer le titre du lien.

Sujet résolu

26 mai 2010 à 20:15:57

Bonsoir,

J'ai un simple menu déroulant, qui au click sur un lien nommé "Dérouler" le contenu caché apparait et se déroule. Lorsque je click à nouveau sur ce lien, qui s'appelle à présent "Enrouler" le contenu se cache.

Mon menu se déroule et se ré enroule très bien lorsque je ne change pas le contenu de la balise <a>, mais lorsque j'essaye de modifier son contenu, il ne veut plus se ré enrouler ...
J'essaye d'utiliser la méthode ReplaceWith(); pour changer le texte de mon lien au click.

Pourquoi lorsque j'essaye juste de changer le titre de mon lien, mon script ne fonctionne plus ?
Merci d'avance, et je vous joins mon code pour que vous puissiez regarder.

<!--Début du contenu-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<link type="text/css" rel="stylesheet" href="css/editeur.css" media="all" />
		<script type="text/javascript" src="jquery.js"></script>
		<style type="text/css">



</style>
<script type="text/javascript"> 
<!-- 
$(document).ready( function () { 
    // On cache les sous-menus : 
    $(".article .description").hide(); 
 

    $(".article > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next(".description:visible").length != 0) { 
            $(this).next(".description").slideUp("normal"); 
            $(this).replaceWith('<a href="#" >Dérouler</a>');

        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".description").slideUp("normal"); 
            $(this).next(".description").slideDown("normal"); 
			$(this).replaceWith('<a href="#" >Enrouler</a>');
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    });     
 
 
} ) ; 
// --> 
</script>  
		
	</head>
	<body>
	<div class="article">
	<a href="#" >Dérouler</a>
		<div class="description">
		<p>five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
	</div>
	
		<div class="article">
	<a href="#" class="toggle">Dérouler</a>
		<div class="description">
		<p>five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
	</div>

	
		<div class="article">
	<a href="#" class="toggle">Dérouler</a>
		<div class="description">
		<p>five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
		</div>
	</div>



	</body>
</html>

<!--Fin du contenu-->

Sephiran

26 mai 2010 à 23:49:06

Jpense que c'est parce que tu remplaces le lien en entier, et donc l'événement click qui lui est associé. Essaye de changer juste le innerHTML de ton lien, et ça devrait rouler.

Kilucru

27 mai 2010 à 10:28:50

Salut Sephiran, merci pour ta réponse.

Je viens de trouver grâce à la fonction html(); ou text(); de Jquery que le remplacement fonctionnait bien.
Cependant je souhaiterais éviter de mettre un code en dur comme ceci :

$(this).html('Enrouler');
En effet, je travaille sur un site multilingue et le terme enrouler ou dérouler sera différent en anglais ou en français.
Ma question est simple, puis je remplacer ce mot en "dur" par une valeur directement gérée depuis mon code php?

J'ai pensé à rajouter un

<input type="hidden" class="enroul" value="<?php  echo 'Enrouler'; ?>" />

sur ma page php et ensuite traiter cette valeur dans mon javascript en effectuant :

$(this).html($("input.enroul").val());

Est ce que ca tient la route, ou y'a t'il plus simple ?

Merci

Sephiran

27 mai 2010 à 11:16:18

Ca tiens la route, mais créer un input juste pour ça c'est un peu violent, une simple variable suffirait.

delphiki

27 mai 2010 à 11:20:25

Surtout que rien ne t'empêche, si ton site est en PHP, de faire quelque chose comme ça :

$(this).html('<?php echo $lang['hide'];?>');

Kilucru

27 mai 2010 à 11:52:10

Merci je ne savais pas.
Même si mon fichier js est externe, je peux quand même utiliser cette technique ?

delphiki

27 mai 2010 à 12:16:39

S'il est nommé en .php, oui, bien sûr.

Kilucru

27 mai 2010 à 12:23:49

Ok, je travaille sous Spip, donc je peux appeler du php.

Il me suffit d'initialiser mes variables dans le head :

<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Test</title>
		<script src="jquery-min.js" type="text/javascript"></script>
		
		<script type="text/javascript">
		
		var enrouler = '<?php echo "enrouler"; ?>';
		var derouler = '<?php echo "derouler"; ?>';
		
		</script>
		
		<script src="script.js" type="text/javascript"></script>
</head>

et d'appeler celles ci dans le JS externe.
Merci à vous tous pour vos réponses