Problème lien sur menu burger

Nouveau WRInaute
Bonjour à tous,

Je dois faire face à une problématique au niveau des liens du menu burger.
Aujourd'hui j'ai le menu "vestiaire", avec un lien renvoyant vers la catégorie et le sous-menu apparait au survol pour afficher les sous-catégories dans le menu "normal".

Mais lorsque j'ai le menu burger, le lien de "vestiaire" ne m'affiche pas le sous-menu au clic, je suis dirigé vers la catégorie.

Pour se faire j'ai bricolé une fonction permettant de cliquer sur une icône pour développer les sous-catégories mais cela ne me plaît pas du tout.

Je souhaite que le lien "vestiaire" affiche le sous-menu en cliquant dessus en menu burger et que lorsque j'ai le menu 'normal' le lien "vestiaire" renvoie vers la catégorie.

Merci

JavaScript:
$('ul.nav > li.dropdown > a > .caret').click(function(e) {
            // on clique spécifiquement sur une flèche => on ouvre et on ferme, que ce soit tactile ou non
            var thisli= $(this).parent().parent();
            if(thisli.hasClass('open')) {
                thisli.find('ul.dropdown-menu:first').stop(true, true).hide();
                thisli.removeClass('open');
            } else {
                thisli.addClass('open');
                thisli.find('ul.dropdown-menu:first').stop(true, true).show();
            }
            e.preventDefault();
            e.stopPropagation();
        });

        $('ul.nav > li.dropdown a').click(function(e) {
            if($(this).attr('href')!='#') {
                // Si écran tactile : on ne veut pas que le clic ferme le menu, mais qu'il mène vers le lien
                // (Au premier appui, on ouvre le menu avec le hover défini ci-dessus - le second appui fait le clic)
                window.location = $(this).attr('href');
            } else {
                // Ouverture / fermeture du menu
                var thisli= $(this).parent();
                if(thisli.hasClass('open')) {
                    thisli.find('ul.dropdown-menu:first').stop(true, true).hide();
                    thisli.removeClass('open');
                } else {
                    thisli.addClass('open');
                    thisli.find('ul.dropdown-menu:first').stop(true, true).show();
                }
            }
            e.preventDefault();
            e.stopPropagation();
        });

et voici mon affichage

HTML:
                            <div class="navbar-collapse collapse">
                                <nav>
                                    <ul class="nav navbar-nav">
                                        <li class="dropdown">
                                            <a href="http://localhost/monsite/vestiaire"  class="dropdown-toggle" data-toggle="dropdown" role="button">Vestiaire</a>
                                            <ul class="dropdown-menu" role="menu">  
                                                <li>
                                                    <a href="http://localhost/monsite/vestiaire1">Vestiaire1</a>
                                                </li>
                                                <li>
                                                    <a href="http://localhost/monsite/vestiaire2">Vestiaire2</a>
                                                </li>
                                             </ul>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
 
Dernière édition:
Discussions similaires
Haut