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