Bootstrap ferme le menu réactif "au clic".

Question

En cliquant sur "PRODUITS", j'ai fait apparaître une division blanche (comme dans la pièce jointe). En responsive (mobile et tablette), je voudrais fermer automatiquement la navbar responsive et ne montrer que la barre blanche.

J'ai essayé :

$('.btn-navbar').click();  

également essayé :

$('.nav-collapse').toggle();

Et ça marche. Cependant, en taille de bureau, il est également appelé et fait quelque chose de funky au menu où il rétrécit pendant une seconde.

Des idées ?

Answer 1

Tuggle Nav Close, réponse compatible avec le navigateur IE, sans aucune erreur de console. Si vous utilisez bootstrap, utilisez ceci

$('.nav li a').on('click', function () {
    if ($("#navbar").hasClass("in")) {
        $('.navbar-collapse.in').show();
    }
    else {
        $('.navbar-collapse.in').hide();
    }
})

Answer 2

J'ai essayé les autres suggestions dans mon application Vue.js 3, mais mon routeur vue-router router-links ne fonctionne plus.

J'ai créé une petite fonction qui permet de cliquer sur la bascule du menu, si le menu a la classe "show". Cela a très bien fonctionné pour moi dans tous les cas.

<template>
...
<div
    id="navbarNavigation"
    class="collapse navbar-collapse"
  >
    <ul
      class="navbar-nav me-auto mb-2 mb-lg-0"
    >
      <li class="nav-item">
        <router-link
          :to="route.url"
          class="nav-link"
          @click="closeMenu('navbarNavigation')"
        >
          My route name
        </router-link>
      </li>
    </ul>
  </div>
...
</template>

<script>
setup (props) {
    const closeMenu = (id) => {
      const menuShown = document.getElementById(id).classList.contains('show')
      if (menuShown) {
        const menuToggle = document.getElementsByClassName('navbar-toggler')[0]
        menuToggle.click()
      }
    }

    return { closeMenu }
  }
</script>

Answer 3

Pour les personnes qui cherchent une solution concernant Vue 3 router-link avec Bootstrap 5 + data-bs -attributs :

Utilisation de data-bs -pour faire basculer le nav directement sur un écran Vue- router-link ne semble pas fonctionner - vous devez donc envelopper chacun de vos liens de navigation dans un élément parent si ce n'est déjà fait (un élément li serait le choix le plus évident) et d'appliquer les règles pertinentes de la data-bs -sur cet élément.

En bref - au lieu de cela :

<li class="nav-item">
  <router-link
    to="/galaxy"
    class="nav-link d-flex"
    data-bs-toggle="collapse"
    data-bs-target="#navbarCollapse.show"
  >
    <v-icon name="gi-galaxy" size="1" class="align-middle" scale="1.5" />
    <span class="flex-fill align-middle text-start ms-3 ms-lg-1">The Galaxy</span>
  </router-link>
</li>

Utilisez ça :

<li class="nav-item" data-bs-toggle="collapse" data-bs-target="#navbarCollapse.show">
  <router-link to="/galaxy" class="nav-link d-flex">
    <v-icon name="gi-galaxy" class="align-middle" scale="1.5" />
    <span class="flex-fill align-middle text-start ms-3 ms-lg-1">The Galaxy</span>
  </router-link>
</li>