Problème accordéon jquery
Bonjour j'ai créé un menu déroulants accordéon.
Mon problème est que l'ouverture de la div se fais bien, c'est à dire que lors du clic sur le bois le formulaire descend mais si je veux le remplir il remonte directement, merci de votre aide et il y a aussi le fait que je n'arrive pas au fait que si on clic sur le body le menu accordéon se referme.
le jquery:
$(document).ready(function () {
$('#paragraphe li').click(function(){
var text = $(this).children('div');
text.slideToggle("middle");});
});l'html :
<ul id="paragraphe">
<li>
<img title="clic" img src="images/nature/slidemildle1.png" alt="je mange des prunes."/></img>
<span>clic ici</span>
<div id="aventage">
</div>
</li>
<li>
<img title="clic" img src="images/nature/slidemildle1.png" alt="je mange des prunes."/></img>
<span>clic ici</span>
<div id="formulaire">
<form action="#">
<p class="double">
</p>
<form action="#">
<p class="double">
<label for="f1-nom">Nom:</label>
<input type="text" id="f1-nom" />
</p>
<p class="double">
<label for="f1-prenom">Prénom:</label>
<input type="text" id="f1-prenom" />
</p>
<p class="double">
<label for="f1-adresse">Adresse:
<span class="info"></span></label>
<input type="text" id="f1-adresse" />
</p>
<p class="double">
<label for="f1-ville">Ville:
<span class="info"></span></label>
<input type="text" id="f1-ville" />
</p>
<p class="double">
<label for="f1-ville">Email:
<span class="info"></span></label>
<input type="text" id="f1-ville" />
</p>
<p class="double">
<label for="f1-ville">Email: (Confirmation)
<span class="info"></span></label>
<input type="text" id="f1-ville" />
</p>
<p class="double">
<label for="f1-telephone">Téléphone:</label>
<input type="text" id="f1-telephone" />
</p>
<p class="double">
<label for="f1-infos">Informations supplémentaires :
<span class="info"></span></label>
<textarea id="f1-infos" rows="5" cols="30"></textarea>
</p>
<p class="simple">
<input type="submit" value="Envoyer ces informations" />
</form>
</div>
</li>
</ul>
6 réponses
Lorsque tu cliques dans un <li>, tu toggles la div (jusque la c'est bon). Oui mais: ton formulaire dans ta div est AUSSI a l'intérieur de ce <li>, donc si tu cliques sur ton formulaire, tu cliques aussi dans ton <li>, donc tu toggles (logique).
Pour éviter ca, tu peux mettre ton toggle sur ton image (slidemildle1.png), plutot que sur le <li>:
$('#paragraphe li img').click(function(){
var text = $(this).siblings('div'); // Oublie pas de changer le .children() pour un .siblings()
text.slideToggle('middle');
});Pour ton autre truc, c'est exactement le meme problème. Tes li, ton formulaire, etc sont dans ton body. Donc il faut que lors d'un clic dans le body tu vérifies si c'est un clic aussi dans le <lu> ou pas:
$('body').click(function(e){
if (!$('#paragraphe').is(e.target) && !$('#paragraphe').has(e.target).length) {
$('#paragraphe li').children('div').slideUp("middle");
}
});Codepen pour visualiser le truc: http://codepen.io/anon/pen/dieof
Tu peux utiliser la fonction .parents():
$(".simple").click(function(){
$(this).parents("div").slideUp("middle");
});Comme je suis sur que, malgré les apparences - qui peuvent parfois etre trompeuse convenons-en, tu n'as aucune intention de te fiche de nous, je te suggère de nous exposer ton problème de facon compréhensible, puisque la on n'y pige quedal (et a ce sujet je ne saurais trop insister sur l'utilité [méconnue?] des signes de ponctuation), et de prendre la peine de placer ton code entre les balises [code] qui servent a ca. Cela aiderait grandement tes conseillers potentiels a ne pas penser que tu as bazardé ton truc en 2 sec sans avoir le respect de le rendre un minimum compréhensible. Un petit codepen serait un plus, quoique pas impératif non plus ... Bonne soirée !
Merci beaucoup et merci pour l'explication du siblings ^^
Je classe l'affaire grâce à toi Vallyan
Désolé de la redondance mais comment faire pour que lors du clic sur le bouton .simple le formulaire se ferme aussi, j'ai essayé cela mais sans succés.
$('#formulaire p:last').click(function(){
$(this).(#formulaire);
text.slideup('middle');
});Merci pour l'utilisation de parent en revanche il faut mettre #formulaire à la place de div mais je pense que l'erreur était intentionnel merci à vous pour votre aide :).
$(".simple").click(function(){
$(this).parents("#formulaire").slideUp("middle");
});