0
votes

jQuery mega menu ajouter / supprimer une classe sur l'élément de menu parent

J'essaye de créer un méga menu dans Shopify, voici ce que j'ai dans mon HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
  <li class="parent-main has-child"><a href="/collections">Shop</a>
    <ul class="child">
      <li class=""><a href="/collections">All Collections</a></li>
    </ul>
  </li>
  <li class="parent-main has-child"><a href="/pages/about">About</a>
    <ul class="child">
      <li class=""><a href="/pages/">Child link</a></li>
      <li class=""><a href="/pages/">Child link</a></li>
    </ul>
  </li>
</ul>

.menu-visible{
color:red}

$('.has-child').on('click', function(event) {
  event.preventDefault();
  $(this).find('.child').toggleClass('menu-visible');
  $('.child').click(function(e) {
    e.stopPropagation();
  });
});

Cela fonctionne tant que je clique pour ouvrir et fermer le même menu parent, mais le problème que je rencontre est qu'une fois que je clique sur un élément du menu parent, puis que je clique sur un autre élément du menu parent, le deuxième menu s'ouvre sur le premier (donc si je clique sur «Boutique» puis sur «À propos», le menu «À propos de» apparaîtra en haut du menu «Boutique»). Je sais que j'ai besoin de l'obtenir pour supprimer la classe "menu-visible" une fois que je clique sur un autre lien parent, mais je ne sais pas comment ... J'ai essayé quelque chose avec .siblings () mais cela n'a pas fonctionné, peut-être que je mal utilisé ...

Des idées?

-Merci.

javascript jquery html shopify

0 commentaires

4 Réponses :

0
votes

Supprimez simplement la classe de tous les éléments, puis réappliquez-la sur celle que vous voulez.

utilisez if ($(this).find('.child').hasClass("menu-visible")) { afin de basculer et de supprimer des autres en même temps

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
  <li class="parent-main has-child"><a href="/collections">Shop</a>
    <ul class="child">
      <li class=""><a href="/collections">All Collections</a></li>
    </ul>
  </li>
  <li class="parent-main has-child"><a href="/pages/about">About</a>
    <ul class="child">
      <li class=""><a href="/pages/">Child link</a></li>
      <li class=""><a href="/pages/">Child link</a></li>
    </ul>
  </li>
</ul>

.menu-visible {
  display: block !important;
}

.child {
  display: none;
}

$('.has-child').on('click', function(event) {
  event.preventDefault();

  if ($(this).find('.child').hasClass("menu-visible")) {
    $('.child').removeClass("menu-visible")
    $(this).find('.child').removeClass('menu-visible');
  } else {
    $('.child').removeClass("menu-visible")
    $(this).find('.child').addClass('menu-visible');
  }

  $('.child').click(function(e) {
    e.stopPropagation();
  });
});

1 commentaires

@ gpr2020 Maintenant ça marche, je l'ai corrigé, il y avait un problème. À votre santé

1
votes

$('.has-child').on('click', function(event) {
  event.preventDefault();

  $(event.currentTarget)
    .find('.child')
    .toggleClass('menu-visible')
    .parent()
    .siblings()
    .find('.child')
    .removeClass('menu-visible')

  $('.child').click(function(e) {
    e.stopPropagation();
  });
});

7 commentaires

Cela n'activera pas et ne désactivera pas this classe d'éléments

@ikiK Avez-vous regardé l'exemple? Il basculera les classes le cas échéant.

Merci pour la réponse, mais avec cette méthode, je ne peux pas ouvrir et fermer l'élément de navigation principal

Je n'ai pas à le faire, ils ne se ferment pas par double clic.

@ gpr2020 exemple mis à jour.

Je suis désolé de le dire mais currentTarget is not defined

Bon endroit, extrait de code mis à jour pour correspondre à l'exemple!

1
votes

Fondamentalement, ce dont vous avez besoin est d'ajouter l'affichage aucun à tous les autres enfants et de basculer celui sur lequel vous cliquez, en utilisant la fonction not () , vous pouvez y parvenir sans instruction if

<!DOCTYPE html>
<html>
<head>
    <title>List</title>
    <meta charset="utf-8">
    <style type="text/css">
        .d-none{
            display: none;
        }
    </style>
</head>
<body>






<ul class="parent">
  <li class="parent-main has-child"><a href="/collections">Shop</a>
    <ul class="child d-none">
      <li class=""><a href="/collections">All Collections</a></li>
    </ul>
  </li>
  <li class="parent-main has-child"><a href="/pages/about">About</a>
    <ul class="child d-none">
      <li class=""><a href="/pages/">Child link</a></li>
      <li class=""><a href="/pages/">Child link</a></li>
    </ul>
  </li>
</ul>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.parent-main a').click(function(e){
            e.preventDefault();
            $('.child').not($(this).parent().find('.child')).addClass('d-none');
            $(this).parent().find('.child').toggleClass('d-none');

        })
    });
</script>
</body>
</html>

2 commentaires

Merci mais c'est ce que j'ai déjà, donc après avoir cliqué sur "Boutique" puis sur "À propos de", je veux qu'il ferme l'option "Boutique"

J'ai modifié ma réponse.

0
votes

This one should solve your problem.


$('.has-child').on('click tap', function(event) {
    event.preventDefault();
    if ($(this).find('.child').hasClass('menu-visible')) {
        $(this).find('.child').removeClass('menu-visible'); // toggle current
    } else { 
        $('.menu-visible').removeClass('menu-visible'); // close all
        $(this).find('.child').addClass('menu-visible'); // open current
    }
});

0 commentaires