Dev Faq
0
votes

Je ne peux pas fermer le menu quand cliquez sur

J'essaie d'avoir à des actions sur un menu NAV (Ouvrir et Fermer) Ceci est mon code:

Ici, je peux ouvrir l'article et le masquer lorsque je clique à l'extérieur mais j'ai besoin également pour fermer l'article lorsque je clique sur le lien .Menu-item-has-a-enfants> a P>

p> 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu">

  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                               Item 1
           </a>

    <ul class="sub-menu">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Link 2
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                                Link 2
         </a>

    <ul class="sub-menu">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Lvl2. Children 3 with children
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>



</ul>

13 commentaires

Obtenez-vous des erreurs de console lors de l'exécution du code?

Vous devriez préparer Jsfiddle d'un tel bogue. Ce sera utile.

Je t'ai fait un extrait. Veuillez modifier, défiler vers le bas et modifier l'extrait d'édition - Ajouter HTML

Pourquoi pas seulement $ (". Sous-menu"). On ("Cliquez sur", fonction (E) {$ (this) .reMOVeclass ("show"); $ (". Menu-item-hay-a-enfants > A "). ATTR ('ARIA-DROPED', FAUX); $ (". MENU-ITEM-ARTIS-ENFANTS> A "). Removeclass ('is-ouvert');});

Impossible d'éditer le snippet car j'ai de nombreuses classes CSS et HTML à afficher, il est difficile de mettre le code dans l'ordre et il faut du temps> <

@mplungjan qu'est-ce que c'est? !!!

Si vous ne pouvez pas être dérangé pour afficher le HTML afin que nous puissions vous aider à utiliser plus de code plus intelligent, nous ne pouvons pas aider. Mon commentaire ci-dessus je devais juste deviner

PS: Je peux également masquer l'élément lorsque vous cliquez dessus, c'est une sorte de bascule (ajout / supprimer la classe) mais c'est le problème réellement :(

@mplungjan ok Voici une simple expliquer: l'utilisateur clique sur le lien et indique l'article, il peut également le masquer lorsqu'il clique dessus (type de bascule sur la lin), il peut également le cacher lorsqu'il clique en dehors du lien Et cela fonctionne bien mais il ne peut pas le cacher lorsqu'il clique sur le lien..J'ai envie de masquer l'élément lorsque je clique sur le lien :) Est-ce clair? : /

@mplungjan j'ai fait du code dans l'extrait de choisir s'il vous plaît?

Merci. Quel est le comportement attendu? En ce moment, les sous-menus ne s'ouvrent pas

Nous avons besoin de spectacle de classe, etc.

@mplungjan fait! chèque de poissons

3 Réponses :

-1
votes

Essayez ceci xxx

2 commentaires

Toujours aucune preuve que cela est nécessaire

Bien que ce code puisse résoudre le problème de l'OP, il est préférable d'inclure une explication sur la manière dont votre code répond à la question de l'OP. De cette manière, les futurs visiteurs peuvent apprendre de votre message et l'appliquer à leur propre code. Donc, ce n'est pas un service de codage, mais une ressource pour la connaissance. De plus, de haute qualité, des réponses complètes sont plus susceptibles d'être évitées. Ces caractéristiques, ainsi que l'exigence selon laquelle tous les postes sont autonomes, sont certaines des forces de manière à ce que la plate-forme, qui la différencie des forums. Vous pouvez modifier pour ajouter des informations supplémentaires et / ou pour compléter vos explications avec la documentation de la source.

0
votes

Essayez de masquer / afficher votre barre de navigation à l'aide de la classe CSS, ce qui sera un moyen facile et efficace de la gérer.

également remplacer $ (document) .MouseUp code> avec $ (document) .Cliquez sur CODE>, vous avez juste besoin de cliquer sur l'événement, alors je vous recommande d'éviter d'utiliser MouseUp Dans de tels scénarios. P>

Vous pouvez faire quelque chose comme ceci: p>

p> 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Demo Test</title>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>

<body>

 <div class="navbar in"></div>
 
</body>
</html>

0 commentaires
0
votes

Voici une solution

S'il n'y a pas de sous-menus, fermez tous les parks ULS avec la classe SHOW P>

J'ai également converti le si sur une bascule p>

p> 

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="menu">

  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                               Item 1
           </a>

    <ul class="sub-menu">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Link 2
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>
  <li class="menu-item menu-item-has-children">
    <a href="#" aria-expanded="false" class="">
                                Link 2
         </a>

    <ul class="sub-menu">
      <li class="menu-item">
        <a href="#" aria-current="page">
                                [Current] Lvl2. Children 1
            </a>

      </li>
      <li class="menu-item">
        <a href="#">
                                Lvl2. Children 2 with long text lorem ipsum
            </a>

      </li>
      <li class="menu-item menu-item-has-children">
        <a href="#" aria-expanded="false">
                                Lvl2. Children 3 with children
            </a>

        <ul class="sub-menu">
          <li class="menu-item">
            <a href="#">
                                Lvl3. Children 1
            </a>

          </li>
          <li class="menu-item">
            <a href="#" aria-current="page">
                                [Current] Lvl3. Children 2 with long text lorem ipsum
            </a>

          </li>
          <li class="menu-item">
            <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl3. Children 3
            <span class="icon-link-external" aria-hidden="true"></span></a>

          </li>
        </ul>
      </li>
      <li class="menu-item">
        <a href="#" target="_blank" class="external-link">
                                [_blank] Lvl2. Children 4
            <span class="icon-link-external" aria-hidden="true"></span></a>

      </li>
    </ul>
  </li>



</ul>

8 commentaires

J'ai exactement le même résultat dans mon code, mais je veux fermer l'article lorsque je clique sur le lien aussi

Tous les liens sans un sous-menu de recherche Fermez les menus dans ce code Je ne sais pas ce que vous voulez dire

Le lien est censé fonctionner comme une bascule qui montre et cache également l'article ... Normalement, il existe également un petit chevron qui change lorsque l'élément est affiché ou caché.

Comme il le fait ici. Je ne sais pas ce que mon code ne fait pas pour toi

Il ne masque pas l'élément lorsque je clique dans le lien (lorsque l'élément est affiché)

Ça fait pour moi. C'est pourquoi je n'ai aucune idée de ce dont vous parlez

Lorsque je clique sur le lien, cela montre simplement l'article lorsque je clique sur le lien une seconde fois pour le masquer, cela ne fonctionne pas!

Ok j'abandonne. Vous avez 90% de ce qu'il semble avoir besoin

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO