11480 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour,

Je suis bloqué avec une animation Jquery pour un menu vertical.
j'arrive à faire descendre du contenu au clic mais j'aimerai que lorsqu'on reclique sur le titre, le contenu remonte. Impossible d'y arriver.


$(document).ready(function () {
  $('#nav-left > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav-left li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav-left li a').removeClass('active');
      $(this).addClass('active');
    }
  });
});


Et voici un lien Jsfiddle : https://jsfiddle.net/zzz7na6c/3/

D'avance merci Smiley smile
Modifié par Jerome-k (01 Jul 2016 - 09:28)
Salut, j'ai repris ton code mais rien ne marche. difficile de t'aider du coup. Mais quitte à utiliser du Jquery autant utilisé .toggle() voila un example
Modifié par JENCAL (30 Jun 2016 - 17:29)
Salut

je cherche pas à tester le code mais théoriquement ceci devrait faire ce que tu veux


$(document).ready(function () {
  $('#nav-left > li > a').click(function(){
      $('#nav-left li ul').slideToggle();
      $(this).next().slideToggle();
      $('#nav-left li a').toggleClass('active');
      $(this).toggleClass('active');
   });
});


Voilà on enlève le IF qui sert pas à grand chose Smiley smile surtout sans avoir un else pour faire une action dans l'autre cas Smiley smile celui qui t'intéresse Smiley cligne
JENCAL a écrit :
Salut, j'ai repris ton code mais rien ne marche. difficile de t'aider du coup. Mais quitte à utiliser du Jquery autant utilisé .toggle() voila un example

Merci d'avoir regardé. Désolé pour le code, j'aurai du directement le mettre dans un éditeur. Voici un lien JSFiddle Merci pour l'exemple, je vais essayer de l'intégrer.. Smiley confus

pchlj a écrit :
Salut

je cherche pas à tester le code mais théoriquement ceci devrait faire ce que tu veux

$(document).ready(function () {
$('#nav-left > li > a').click(function(){
$('#nav-left li ul').slideToggle();
$(this).next().slideToggle();
$('#nav-left li a').toggleClass('active');
$(this).toggleClass('active');
});
});

Voilà on enlève le IF qui sert pas à grand chose Smiley smile surtout sans avoir un else pour faire une action dans l'autre cas Smiley smile celui qui t'intéresse Smiley cligne

Merci pour le code mais le problème c'est que tous les liens s'ouvrent en même temps Smiley decu
Ok désolé.. je t'ai dit j'ai pas testé...

donc dans fiddle j'ai fait ça et ça fait ce que tu veux Smiley smile


$(document).ready(function() {
  $('#nav-left > li > a').click(function() {
    if ($(this).attr('class') != 'active') {
      $('#nav-left li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav-left li a').removeClass('active');
      $(this).addClass('active');
    }else{   
      $(this).next().slideToggle();
      $('#nav-left li a').removeClass('active');
      $(this).removeClass('active');
    }
  });
});
pchlj a écrit :
Ok désolé.. je t'ai dit j'ai pas testé...

donc dans fiddle j'ai fait ça et ça fait ce que tu veux Smiley smile


$(document).ready(function() {
  $('#nav-left > li > a').click(function() {
    if ($(this).attr('class') != 'active') {
      $('#nav-left li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav-left li a').removeClass('active');
      $(this).addClass('active');
    }else{   
      $(this).next().slideToggle();
      $('#nav-left li a').removeClass('active');
      $(this).removeClass('active');
    }
  });
});

Wouaw super ! Quelle rapidité ! Merci beaucoup !!!

Bon week-end Smiley biggrin
Te fais pas chier avec un IF / ELSE, en une ligne tu peux tout regler !


$(document).ready(function() {
  $('#nav-left > li').click(function() {
   $("ul", this).slideToggle();
  });
});
JENCAL a écrit :
Te fais pas chier avec un IF / ELSE, en une ligne tu peux tout regler !


$(document).ready(function() {
  $('#nav-left > li').click(function() {
   $("ul", this).slideToggle();
  });
});

Humph.. Ca m'apprendra à essayer de bidouiller des trucs que je ne comprends pas Smiley rolleyes

Tout grand merci !!!
Pour l'explication, même si tu n'a pas demandé Smiley smile

tu te positionne avec $('#nav-left > li').click(function() {. Donc au "click" tu es positionné sur le <li> cliqué ! il suffit de faire un $("ul", this) pour simuler un .find() et du coup appliquer un slidetoogle au <ul> étant l'enfant de "this" (de ton <li> cliqué). J'espère que c'est plus clair.
Comme ça c'est compréhensible (même pour moi). Merci pour l'explication..
Je ne pigeais pas l'utilisation du SlideUp pour faire un dropdown, l'utilisation des class?,... dans le code initial Smiley confus
Mais bon.. faut dire que le JS et moi on n'a pas bien appris à se connaître..
Euh.. désolé d'encore te déranger mais serait-ce possible d'avoir le <ul> qui rentre lorsqu'on clique ailleurs ?

Ici il ne rentre que si on reclique sur son propre titre..

Merci Smiley confused
Ah oué, c'est emmerdant ça.

$(document).ready(function() {
  $('#nav-left > li').click(function() {
   $('#nav-left > li > ul').hide();
   $("ul", this).slideToggle();
  });
});


Mais du coup avec cela, on a plus l'effet smoothy ^^
Rectification !

j'ai trouvé slideUp();

$(document).ready(function() {
  $('#nav-left > li').click(function() {
   $('#nav-left > li > ul').slideUp();
   $("ul", this).slideToggle();
  });
});


c'est bien mieux Smiley langue
Merci Smiley smile
Mais du coup quand on reclique sur le titre qui est déjà déployé, ca ne revient pas Smiley biggol
Même soucis qu'au départ.. Smiley confus
petit complément sur le code excellent de JENCAL qui éventuellement corrigera mon petit bout Smiley cligne

avec ce code ça te positionne la class active sur l'élément ouvert Smiley cligne et ça enlève ceux qui sont fermés

$(document).ready(function() {
  $('#nav-left > li').click(function() {
   $('#nav-left > li > ul').slideUp();
   $("ul", this).slideToggle();
   $('#nav-left > li').removeClass('active');
   $(this).toggleClass('active');
  });
});
et pour corriger le problème du reclic Smiley cligne


$(document).ready(function() {
  $('#nav-left > li').click(function() {
  	$('#nav-left > li > ul').slideUp();
   	if(!($(this).hasClass('active')))
   		$("ul", this).slideToggle();
   	$('#nav-left > li').removeClass('active');
   	$(this).toggleClass('active');
  });
});



le if reste nécessaire
et je l'avais pas assez testé :s

ça ça focntionne bien


$(document).ready(function() {
  $('#nav-left > li').click(function() {
  	$('#nav-left > li > ul').slideUp();
   	if(!($(this).hasClass('active'))){
    	   $('#nav-left > li').removeClass('active');
   	   $("ul", this).slideToggle();
           $(this).addClass('active');
        }else{
    	   $(this).toggleClass('active');
       }
  });
});


je pense qu'il y a plu ssimple masi là comme ça je vois pas mieux
Modifié par pchlj (01 Jul 2016 - 12:54)
Merci beaucoup c'est top !
Petit truc "bizarre" mais pas du tout bloquant, quand on clique, ca se déroule, quand on reclique ca rentre et quand on re-reclique, rien ne se passe Smiley langue

EDIT : problème de mon côté.. le code fonctionne à 100% ! Encore merci pour tout!!
Modifié par Jerome-k (01 Jul 2016 - 13:50)
Modérateur
pchlj a écrit :
je pense qu'il y a plu ssimple masi là comme ça je vois pas mieux


mmmh…

$(document).ready(function() {
  $('#nav-left > li').click(function() {
  	$(this).siblings('li').find('ul').slideUp();
   	$("ul", this).slideToggle();
  });
});
Pages :