[Résolu] Fermeture menu déroulant au clic (jquery)

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 surtout sans avoir un else pour faire une action dans l'autre cas celui qui t'intéresse

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

$(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

$(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

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

Tout grand merci !!!

Pour l'explication, même si tu n'a pas demandé

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.

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

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

Merci
Mais du coup quand on reclique sur le titre qui est déjà déployé, ca ne revient pas
Même soucis qu'au départ..

petit complément sur le code excellent de JENCAL qui éventuellement corrigera mon petit bout

avec ce code ça te positionne la class active sur l'élément ouvert 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

$(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

Je pense que tu as raison, le if est necessaire.

Je chercher au niveau de http://api.jquery.com/siblings/ mais j'ai pas trop le temps.

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)

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();
  });
});