11540 sujets

JavaScript, DOM et API Web HTML5

Jquery toggle, avoir un plus et un moins

Bonjour,

Débutante en jquery, je suis sure que quelqu'un dans ce forum aura la réponse à tous mes soucis.
Je déroule un menu quand je clique sur un bouton. Ma problématique est la suivante.
-Je veux qu'un plus s'affiche avant le premier click,
-qu'un moins s'affiche après le click,
-et qu'enfin quand je reclick sur mon bouton le lus apparaisse à nouveau... et c'est la que je ne trouve pas par moi même comment faire.

Mon code html

<button class=" bt btauteur">filtrer par auteur  </button>
<ul class="liste auteur">
  --mon menu--
</ul>


Mon Jquery

$(document).ready(function(){
	$('.liste').hide();
	$('.bt').append($('<style>.bt:after { content: " +" }</style>'));
	$('.btauteur').click(function(){
		$('.liste.auteur').toggle('slow');	
		$('.bt').append($('<style>.bt:after { content: " -" }</style>'));
	});
		
});


mmmm... désolé pas très fière de mon code, mais surtoutr je cherche un tuto ou une aide pour ce plus et moins, que je ne trouve pas

Merci à tous ceux qui voudront bien m'apporter un peu d'aide Smiley smile
Modifié par cathyboulot2012 (09 Oct 2012 - 13:36)
Salut,

Revoit la fonction toggle, elle prend 2 fonctions.
Par exemple, la première affiche, la seconde cache.

Au passage, si tu veux modifier le css d'un élément, passe par css() ou l'ajout/suppression de class. Par ce que là, la règle .bt:after va exister plein de fois (du au append).
Pour un menu j'aurai tendance à ajouter le + ou - dans un élément et changer le text en fonction.
Je crois que tu t'es compliqué la vie pour rien Smiley lol

Le code suivant devrait te permettre de comprendre comment ça marche Smiley cligne tu peux retrouver le même genre de code sur la doc de jquery en ligne Smiley cligne 

<p>Hello</p>
<p style="display: none">Good Bye</p>

<script type="text/javascript">
$('p').click(function()
{
$('p').toggle();
})
</script>


Bon courage
Sujet clos
Aller à