0
votes

menu déroulant ne s'ouvrant pas et la fermeture correctement

Je l'ai d'ouvrir et de fermer lors de la navigation sur le lien NAV mais comment puis-je le garder ouvert afin que je puisse accéder au contenu du menu? J'en ai besoin pour fonctionner exactement comment fonctionne un menu déroulant.

C'est ce que j'ai fait jusqu'à présent, j'ai aussi besoin de la mise en page HTML pour rester identique. P>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li class="nav-link">home</li>
    <li class="nav-link--dropdown">dropdown</li>
  </ul>
</div>
<div class="dropdown-menu">
  <ul>
    <li class="dropdown-menu__link">random text</li>
    <li class="dropdown-menu__link">random text</li>
    <li class="dropdown-menu__link">random text</li>
  </ul>
</div>

javascript jquery html

0 commentaires

4 Réponses :

0
votes

Le problème que vous avez ici est que vous quittez la NAV-Link - Dropdown lorsque vous vous déplacez dans votre menu déroulant. La solution simple: Inclure votre menu déroulant dans votre élément de navigation NAV.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li class="nav-link">home</li>
    <li class="nav-link--dropdown">
     dropdown
      <div class="dropdown-menu">
        <ul>
          <li class="dropdown-menu__link">random text</li>
          <li class="dropdown-menu__link">random text</li>
          <li class="dropdown-menu__link">random text</li>
        </ul>
      </div>
    </li>
  </ul>
</div>

0 commentaires

0
votes

Vous pouvez y parvenir en regroupant l'élément de menu que vous souhaitez survoler et il est déroulant dans la même div. xxx

et: xxx

Voir cette jsfiddle: https://jsfiddle.net/rmdfqh6c/

0 commentaires

1
votes

devrait éliminer le rembourrage d'utilisation de la marge pour cela, sinon lorsque nous entrons dans cette zone de marge, l'événement de congé de la souris déclenchera.

p >

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="nav">
    <ul>
        <li class="nav-link">home</li>
        <li class="nav-link--dropdown">dropdown</li>
    </ul>
</div>
<div class="dropdown-menu">
    <ul>
        <li class="dropdown-menu__link">random text</li>
        <li class="dropdown-menu__link">random text</li>
        <li class="dropdown-menu__link">random text</li>
    </ul>
</div>

0 commentaires

0
votes

Étant donné que votre problème est l'événement code> Mouseleave Mouseleave déclenchera lorsque vous essayez de déplacer la souris dans le menu déroulant ci-dessous, si vous devez vraiment conserver les éléments séparés, ajoutez le menu déroulant à la classe qui Garde l'affichage: bloquer

.nav ul li {
  line-height: 40px;
}

ul {
  list-style: none;
  margin: 0;  // <--- I changed this from padding: 0px;
  display: flex;
}

0 commentaires