Discussion :

[AMP29]

Bonjour,

Je rencontre un problème avec un menu dans mon thème Wordpress.
WP 5.6.1 et le thème (free) c'est "Minimal Grid" v1.2.9.

Vous pouvez voir une version du site en ligne ici :
http://mobilier.zuleika-arts.fr/

Le site en ligne est en version WP 5.5.3 et "Minimal Grid" v1.0.8.


Mon problème est que quand on clique sur un lien d'un sous-menu il se repli. Je voudrais qu'il reste déplié.

Tout a l'air de se passer dans le fichier script.js de Minimal Grid.
(minimal Grid > assets >Thememattic > js > script.js)

Je vous mets ici un extrait de script.js

Version 1.2.9 (sur laquelle je travaille en local).
La plupart des mise en commentaire ne sont pas de moi (sauf >>>>>>> etc)

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
 
   n.mobileMenu = {
        init: function () {
            this.toggleMenu();
            this.menuArrow();
        },
        toggleMenu: function () {
            e('.nav-toogle').on('click', function (event) {
                e('body').toggleClass('extended-menu');
 
            });
            e('.main-navigation').on('click', 'ul.menu a i', function (event) {
                event.preventDefault();
                var ethis = e(this),
                    eparent = ethis.closest('li'),
                    esub_menu = eparent.find('> .sub-menu');
 
                // console.log(esub_menu.css());
                // if (esub_menu.css('display') == 'none') {
                //     console.log('aye');
                //     esub_menu.slideDown('300');
 
                // } 
                if(ethis.hasClass('active')) {
                    esub_menu.slideUp('300');
                    ethis.removeClass('active');
                } else {
                    esub_menu.slideDown('300');
                    ethis.addClass('active');
 
                }
 
 
                //else if (esub_menu.css('display') == 'block') {
                //     console.log('aye');
                //     esub_menu.slideUp('300');
                //     ethis.removeClass('active');
                // } 
                // else {
                //     //console.log('aye');
                //     esub_menu.slideDown('300');
                //     ethis.addClass('active');
                // }
                return false;
            });
            e('.main-navigation').on('focus', '.menu-item-has-children > a', function(event) {
                var ethis = e(this),
                    eparent = ethis.parent('li'),
                    esub_menu = eparent.find('> .sub-menu');
 
                // console.log(esub_menu);
 
                if(ethis.hasClass('active')) {
                    esub_menu.slideUp('300');
                    ethis.removeClass('active');
                } else {
                    // esub_menu.slideDown('300'); >>>>>>>>>>> 1 autre problème résolu
                    ethis.addClass('active');
                }
 
                return false;
            });
        },
        menuArrow: function () {
            if (e('.main-navigation ul.menu').length) {
                e('.main-navigation ul.menu .sub-menu').parent('li').find('> a').append('<i class="icon-nav-down">');
            }
        }
    };

J'ai commenté esub_menu.slideUp('300'); "1 autre problème résolu" : le fait que le menu parent se dépliait lorsqu'on cliquait dessus.

(Cette discussion initialement ouverte dans le forum "Wordpress" est devenue un pb Javascript)

Mon problème restant :
Je voudrais empêcher le sous-menu de se replier.

J'ai placé un console.log juste avant le "return false;" de la méthode, je le vois donc apparaître à chaque manipulation du menu, mais lors du repliement intempestif après un clique sur un sous-menu la console n'affiche rien.
La méthode n'est pas sollicitée à ce moment.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
   if(ethis.hasClass('active')) {
                    esub_menu.slideUp('300');
                    ethis.removeClass('active');
                } else {
                    // esub_menu.slideDown('300');
                    ethis.addClass('active');
                }
 
                console.log('Test'); //<<<<<<<<<<<<<<<<<<<<<<<<
 
                return false;
            });

J'ai ajouté une méthode pour forcer le sous-menu à s'ouvrir :

Code :

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

1
2
3
4
5
6
7
8
 
 
    n.mobileMenu = {
        init: function () {
            this.toggleMenu();
            this.menuArrow();
            this.sousMenu(); // <<<<<<<<<<<<<
        },

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
 
sousMenu: function(){
 
    e(".current-menu-item").closest(".menu-item-has-children").each(function() {
 
        let ethis = e(this).find("a"),
            eparent = ethis.parent('li'),
            esub_menu = eparent.find('> .sub-menu');
 
        if (!ethis.hasClass('active')) {
            esub_menu.slideDown('300');
            ethis.addClass('active');
 
        }
 
    });

Mais si le sous-menu finit par s'afficher, il se referme d'abord et se réouvre ensuite.
Je voudrais l'empêcher d'avoir l'idée de se refermer.

Quelque chose replie le sous-menu en amont de cette méthode.
Et ce n'est qu'après que la méthode est exécutée, et rouvre le sous-menu.

Je n'arrive pas à trouver ce qui s'exécute aussitôt après le clique et avant que la méthode soit appelée, et qui replie le sous-menu.

Je vois partout qu'il s'agit d'un "mobileMenu" un "toggleMenu" qui donc doit se comporter de manière à toujours se refermer en premier.
Je ne trouve pas comment éviter cela.

Merci pour votre aide

[NoSmoking]

Bonjour,

Mon problème restant :
Je voudrais empêcher le sous-menu de se replier.

le comportement que tu observes est normal attendu que tu changes de page, le JavaScript ne survit pas à un changement de page.

Pour récupérer des données inter pages tu as l'embarras du choix

• variables de session
• cookies
• local/sessionStorage

Pour ouvrir, au bon endroit ton menu, tu peut le faire également côté serveur.

[AMP29]

Bonjour NoSmoking,

En effet, je craignais cela. Que ce soit le rechargement de la page qui soit mon problème.
Et pour m'être un peut renseigné, j'ai appris que WP ne peut rafraîchir que toute la page.

Pour récupérer des données inter pages tu as l'embarras du choix

variables de session
cookies
local/sessionStorage

C'est pas de mon niveau.
J'en prends mon parti, finalement. ça se rafraîchira entièrement.


Néanmoins je me suis aperçu que ".current-menu-item" était conservé après le rechargement.
Sur cette base j'ai un peu avancé (en bidouillant).
J'y suis presque.
Voici la méthode complète du menu et mon ajout dans "sous-menu :

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
 
    n.mobileMenu = {
        init: function () {
            this.toggleMenu();
            this.menuArrow();
            this.sousMenu(); // <<<<<<<<<<<<<
        },
        toggleMenu: function () {
            e('.nav-toogle').on('click', function (event) {
                e('body').toggleClass('extended-menu');
            });
            // ------------------   ARROW  +/-    ---------------------------------------------------------
            e('.main-navigation').on('click', 'ul.menu a i', function (event) {
                event.preventDefault();
                var ethis = e(this),
                    eparent = ethis.closest('li'),
                    esub_menu = eparent.find('> .sub-menu');
 
                if (ethis.hasClass('active')) {
                    esub_menu.slideUp('300');
                    ethis.removeClass('active');
                } else {
                    esub_menu.slideDown('300');
                    ethis.addClass('active');
                }
 
                return false;
            });
            // ------------------   FIN ARROW  +/-   ---------------------------------------------------------
 
            e('.main-navigation').on('focus', '.menu-item-has-children > a', function (event) {
                console.log('aye');
                var ethis = e(this),
                    eparent = ethis.parent('li'),
                    esub_menu = eparent.find('> .sub-menu');
 
                console.log(esub_menu);
 
                if (ethis.hasClass('active')) {
                    esub_menu.slideUp('300');
                    ethis.removeClass('active');
                } else {
                    // esub_menu.slideDown('300'); // <<<< ça pour empêcher les menu principaux de se déplier sur un clique 
                    ethis.addClass('active');
                }
 
                return false;
            });
        },
        menuArrow: function () {
            if (e('.main-navigation ul.menu').length) {
                e('.main-navigation ul.menu .sub-menu').parent('li').find('> a').append('<i class="icon-nav-down">');
            }
        },
 
        sousMenu: function () {
 
            e(".current-menu-item").closest('ul').each(function () {
 
                if (e(this).find('sub-menu')) {
                    let SUB = e(this).closest(".menu-item-has-children"),
                        esub_menu = SUB.find('> .sub-menu'),
                        ecroix = e(SUB).find("i");
                    console.log(esub_menu);
 
                    esub_menu.slideDown('300');
 
                    if (!ecroix.hasClass('active')) {         // <<<<<<<<<<<<< problème ici 
                        ecroix.addClass('active');
                    }
 
                }
 
            });
 
 
        }
    };

J'obtiens (à un problème près) ce que je veux :
1 - les menu parents ne se déplient pas lorsqu'on clique dessus
2 - si ".current-menu-item" est dans un sous-menu alors seulement on déplie le menu parent


Mais il me reste un problème à régler :
Toutes les croix "+" se changent en moins "-" dans le sous-menu déplié.

Une image sera plus parlante


le menu "current" est "Art Africain"
"Vases" est un sous-menu qui comporte des sous-menus.
Il n'est pas déplié, son icone devrait être "+"

Je devrais peut-être refaire un test avec ".menu-item-has-children" et/ou empêcher que "active" s'applique à tous et sélectionner lesquels.
Je ne sais pas faire. Je n'ai le nez dans JQuery que depuis 4 jours à peine.

Si la solution saute aux yeux d'une bonne âme, j'en serais ravi.

Merci pour votre aide.

[AMP29]

J'ai fait ça :

Code :

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

1
2
3
4
 
                    if (!ecroix.first().hasClass('active')) {
                        ecroix.first().addClass('active');
                    }

Sauf que, évidemment, j'ai un second problème.
si je clique sur "Décoration>Vases>cuivres" le deuxième niveau, tout se passe bien/mal.
La méthode s'applique et le sous-sous-menu est "display : block" sauf qu'il est invisible puisque le niveau supérieur, lui, n'est pas déployé.

[AMP29]

J'ai continué ma méthode "sous-menu" ainsi :

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
 
                if ((e(this)).is(":hidden")){
                    console.log("#esub_menu est caché"); 
 
                    e(".current-menu-item").parents(".current-menu-ancestor").each(function () {
 
                        console.log(this);
 
                        let MenuPSub = e(this).find('> .sub-menu'),
                        SUB = e(this).closest(".menu-item-has-children"),
                        ecroix = e(SUB).find("i");
 
                        MenuPSub.slideDown('300');
 
                        if (!ecroix.first().hasClass('active')) {
                            ecroix.first().addClass('active');
                        }
                    });
                }

Je déplie l’ancêtre.

Et je crois que j'ai résolu tous mes problèmes.
Je ne pensais pas y arriver il y a 5 jours.

Merci spécial à Mathieu qui m'a refilé une bobine JQuery que j'ai pu dépeloter.
Merci à tous.

Je suis content.
Je vais me coucher.

(Je reviens mettre "résolu" demain, si tout va encore bien)