Discussion :

[Nighthawk]

Bonjour,

Je suis en train de faire mon site web et j'utilise du javascript par le biais de la bibliothèque jQuery. Le truc c'est que je suis une tanche en javascript et que je me retrouve avec un tas de bouts de code adaptés de droite et de gauche et ça fini par être assez impressionnant à l'écran. Notez tout de même que ça fonctionne à l'heure actuelle, mais je pense qu'une optimisation serait possible.

Voilà mon code commenté (ce qui explique aussi pourquoi il est long) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
$(document).ready(function(){
 
  //on vire le bouton créé automatiquement par jimdo
	$('.jmd-nav__toggle-button').remove();
 
	//on annule le liens pour les références -> faisable pour les éléments ayant des enfants
	$('#cc-nav-view-2350882324 > a').click(function() {
		return false;
	});
 
  //ajout de la classe has-sub lorsqu'il y a des enfants
  $('.jmd-nav__list-item-0:has(.cc-nav-level-1)').addClass("has-sub");
 
  //fonction au clic
  $('.jmd-nav__list-item-0 > a').click(function(){
 
    //on va chercher l'élément suivant celui qu'on a cliqué
    var checkElement = $(this).next();
 
    //on supprime les classes actives existantes
    $('.j-nav-variant-nested li').removeClass('active');
 
    //on ajoute une classe active à l'élément li le plus proche
    $(this).closest('.jmd-nav__list-item-0').addClass('active');
 
    //si notre checkElement est un sous-menu et que celui-ci est visible, alors on le désactive et on le cache
    if((checkElement.is('.cc-nav-level-1')) && (checkElement.is(':visible'))) {
      $(this).closest('.jmd-nav__list-item-0').removeClass('active');
      checkElement.slideUp('normal');
    }
 
    //si notre checkElement est un sous-menu et qu'il est invisible, alors on cache les sous-menu visibles et on montre celui-ci
    if((checkElement.is('.cc-nav-level-1')) && (!checkElement.is(':visible'))) {
      $('.cc-nav-level-1:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }
 
    //si notre checkElement renvoie vers un sous-menu, alors on désactive les liens
    if(checkElement.is('.cc-nav-level-1')) {
      return false;
    }
 
    //si non, on suit le liens cliqué
    else {
      return true;
    }
  });
 
 
  //si le liens visité a la class cc-nav-current, alors on la donne à son parent et on le montre à l'ouverture de la page
	if($('.cc-nav-level-1 li').hasClass('cc-nav-current')){
		$('.cc-nav-level-1').parent('li').addClass('cc-nav-current');
		$('.cc-nav-level-1').slideDown('normal');
	}
 
  //si non, on le cache
  else{
		$('.cc-nav-level-1').slideUp(0);
	}
 
  //les éléments de sous-menu n'étant pas page courrante reçoivent un style	
	$('.cc-nav-level-1').children('li').not('cc-nav-current').find('a').css({'border-left' : '1px dashed #c2d944'}).last('a').css({'border-bottom' : '1px dashed #c2d944'});
 
 
  //on ajoute un niveau de liste au-dessus du menu existant
  $('.cc-nav-level-0').wrap('<ul class="cc-nav-level-X" id="navigation"><li class="jmd-nav__list-item-X" id="ref-lvl"></li></ul>');
 
 
 
 
  //cette partie du code sera soumise à une condition :  la largeur de la fenêtre devra être inférieure à 924px
  //Je suis encore en train de tester la fonction permettant ce miracle
 
  //on ajoute un liens et un nom d'entête avant le menu existant
  var openMenu = document.createElement('a');
  openMenu.setAttribute('href', '#');
  openMenu.setAttribute('data-link-title', 'Ouvrir le menu');
  openMenu.innerHTML = 'Ouvrir le menu';
  var buttonAfter= document.getElementById('cc-nav-view-2074207824');
  var refElement = buttonAfter.parentNode;
  var parentElement = document.getElementById('ref-lvl');
  parentElement.insertBefore(openMenu, refElement);
 
  //on insère des balises span à l'intérieur des liens, encadrant le texte existant	
	$('a').wrapInner('<span></span>');
 
  //fonction au clic
  $('.jmd-nav__list-item-X > a').click(function(){
 
    //le même que checkElement : on vérifie l'élément suivant celui qui a été cliqué
    var checkElement2 = $(this).next();
 
    //on supprime les classes active de chaque élément de liste li
    $('.j-nav-variant-nested li').removeClass('active');
 
    //on ajoute la classe active à l'élément de niveau X le plus proche (de toute façon il n'y en a qu'un)
    $(this).closest('.jmd-nav__list-item-X').addClass('active');
 
    //si notre checkElement2 est un sous-menu et qu'il est visible, alors je le cache et le désactive
    if((checkElement2.is('.cc-nav-level-0')) && (checkElement2.is(':visible'))) {
      $(this).closest('.jmd-nav__list-item-X').removeClass('active');
      checkElement2.slideUp('normal');
    }
 
    //si notre chackElement2 est un sous-menu et qu'il est invisible, alors je cache les autres menus ouverts et je montre celui-ci
    if((checkElement2.is('.cc-nav-level-0')) && (!checkElement2.is(':visible'))) {
      $('.cc-nav-level-0:visible').slideUp('normal');
      checkElement2.slideDown('normal');
    }
 
    //si notre checkElement2 est un sous-menu, alors je ne suis pas le liens sur lequel j'ai cliqué
    if(checkElement2.is('.cc-nav-level-0')) {
      return false;
    }
 
    //si non je suis le liens cliqué
    else {
      return true;
    }
  });
 
});

Pour le voir marcher vous pouvez aller voir ici (en sachant que sur codepen, certaines fonctions ne sont pas testables, du coup je vous demande de me croire quand je vous dit que ça fonctionne . Cela dit, si vous avez d'autres propositions plus efficaces, je suis ouvert !).

Comme je l'ai déjà dit, je suis ouvert à des propositions assez radicales qui permettraient plus d'efficacité et, pourquoi pas, une optimisation du code.

Dernière chose à savoir : je construit mon site sur jimdo (pour tout un tas de raisons) et du coup je ne touche pas à la structure html directement (ça peut avoir des effets néfastes sur le fonctionnement du site...), même s'il m'arrive de la modifier grâce à javascript.

D'avance merci pour votre aide et désolé pour ce pavé que je vous donne à lire.

[NoSmoking]

Bonjour,
si j'ai bien compris ce que tu cherches à faire il existe .slideToggle().

Pour info, et suivant ce que tu cherches à cibler comme navigateurs, la même chose est faisable en CSS3.

[Nighthawk]

Tout d'abord merci pour ta réponse.
Deuxièmement, désolé pour le temps de réponse (je ne suis pas sur le code de mon site aussi souvent qu'il le faudrait).

Effectivement, cette fonction correspond tout à fait à ce que je souhaite faire. Donc dans un cadre simple c'est facile à mettre en oeuvre.
Mon problème c'est que je ne souhaite l'utiliser que lorsque la taille de la fenêtre est inférieure à 924px. Du coup j'ai utilisé la fonction matchMedia. Le problème c'est que le fonctionnement est assez aléatoire du coup... Parfois je clique une fois et le menu que ciblé fait des vas et viens (nombre variable) avant de se stabiliser (parfois dans la position initiale), parfois il ne se stabilise jamais, des fois ca marche niquel...
J'ai un codepen ici qui montre tout mon bout de code. Si vous avez une solution pour fixer ce problème, je suis preneur!

Et encore merci pour votre aide.

EDIT : A noter qu'en utilisant la méthode matchMedia n°1 (sans prise en compte du redimensionnement donc) ça marche sans problème. C'est donc le redimensionnement qui me fait défaut...

EDIT 2 : Après quelque recherches et beaucoup d'essais (c'est ça aussi d'être une tanche en js et jquery) j'ai finalement trouvé une solution. J'ai donc apporté quelque modifications dans mon code, notamment pour que ma fonction au clic de la souris ne soit pas conditionnée, mais reste liée à mon événement resize. Dans cette fonction j'ai simplement rajouté la ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

redimensionnement.stopPropagation();

Du coup quand je clique sur ma "tête de menu" mon javascript arrête de vérifier la largeur de la fenêtre; Si je me remet à trifouiller ma fenêtre, alors sa largeur est de nouveau vérifiée.
Et c'est toujours visible sur ce codepen.