Salut les dév et les apprentis codeurs,

aujourd’hui un nouvel article ultra rapide pour vous parler d’une erreur de menu bootstrap sur laquelle je suis tombée récemment dans la création d’un site de vente en ligne sur Prestashop 1.7 avec le thème PRS01 / Cosmetic Store.

Si vous me lisez actuellement il est très probable que vous soyez à la recherche d’une solution pour un comportement bizarre de votre menu dropdown bootstrap sur ce thème. Si comme moi, lorsqu’au survol des menus, les sous-menus s’affichent une première fois puis ne s’affichent plus ensuite du moins lorsque vous survolés les menus précédents (de droite à gauche), alors voici la solution technique à apporter. Il s’agit de code javascript.

A la ligne 2175 du theme.js (emplacement /themes/PRS01/assets/js/theme.js), vous retrouvez les instructions au survol des éléments du menu (li) :

t.el.parent().hasClass("mobile") || (n !== (0, u.default)(e.currentTarget).attr("id") && (0 === (0, u.default)(e.target).data("depth") && (0, u.default)("#" + n + " .js-sub-menu").hide(), n = (0, u.default)(e.currentTarget).attr("id")), n && 0 === (0, u.default)(e.target).data("depth") && (0, u.default)("#" + n + " .js-sub-menu").css({
top: (0, u.default)("#" + n).height() + (0, u.default)("#" + n).position().top
}));

Ajoutez l’affichage de l’élément courant au survol (supression du inline style css) ceci permettra de le ré-afficher si jamais il a été masqué par le survol d’un autre élément du menu à posteriori. Via le code suivant :

(0, u.default)(e.target).parent().find('.js-sub-menu').removeAttr("style");

Ce qui donne le résultat suivant :

(0, u.default)(e.target).parent().find('.js-sub-menu').removeAttr("style");
t.el.parent().hasClass("mobile") || (n !== (0, u.default)(e.currentTarget).attr("id") && (0 === (0, u.default)(e.target).data("depth") && (0, u.default)("#" + n + " .js-sub-menu").hide(), n = (0, u.default)(e.currentTarget).attr("id")), n && 0 === (0, u.default)(e.target).data("depth") && (0, u.default)("#" + n + " .js-sub-menu").css({
top: (0, u.default)("#" + n).height() + (0, u.default)("#" + n).position().top
}));

Si votre problème est résolu grâce à cet article, faites-le savoir en commentaire !

++