Twitter Bootstrap mobile nav: masquer le menu après avoir cliqué sur le lien du menu

Je suis à la recherche d'un moyen de rendre le Twitter Bootstrap mobile/tablette nav automatiquement/masquer l'effondrement après avoir cliqué sur un lien de menu. J'ai beaucoup d'éléments de menu et ainsi, lorsque des utilisateurs développez le menu de l'iPhone, ils ne voient que le menu et pas de la page en dessous. Cela confond l'utilisateur lorsqu'il clique sur un lien du menu, ce qui semble comme rien ne s'est passé après le clic.

Un grand merci à vous et câlin à quelqu'un qui peut me pointer dans la bonne direction avec ce!

source d'informationauteur bjornfloki

  1. 19

    Si vous utilisez BS3.x vous pouvez réduire le mobile nav avec des balises comme ceci - avis de la “data-toggle” et “data-target” dans le balisage pour le lien accueil:

      <nav class="collapse navbar-collapse" role="navigation">
    <ul class="nav navbar-nav">
      <li class="active">
        <a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a>
      </li>
      <li>

    Vous pouvez également réduire le mobile Nav via le script comme ceci:

        <script>
      $('.navbar-collapse a').click(function (e) {
        $('.navbar-collapse').collapse('toggle');
      });
    </script>

    Cette approche ne nécessite absolument pas de supplément de balisage. Chaque fois qu'un lien est cliqué dans la valeur liquidative il permet de basculer entre la barre de navigation.

    Acclamations.

  2. 9

    La navigation doivent être fermées en tout temps par un utilisateur clique n'importe où sur le corps - et pas seulement des éléments de navigation. Dire que le menu est ouvert, mais l'utilisateur clique dans la page d'administration. L'utilisateur s'attend à voir le menu fermer.

    Vous aussi, vous devez assurez-vous que le bouton à bascule est visible, sinon un saut est vu dans le menu.

    $(document).ready(function() { 

$("body").click(function(event) {
        //only do this if navigation is visible, otherwise you see jump in navigation while collapse() is called 
         if ($(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible") ) {
            $('.navbar-collapse').collapse('toggle');
        }
  });

});
  3. 9

    La façon la plus simple que j'ai trouvé est d'utiliser les attributs de données sur n'importe quel barre de navigation de liens où l'effondrement de la barre de navigation mobile est souhaitée. Utilisation data-target=".navbar-collapse.in" de sorte que la barre de navigation est seulement bascule dans l'état ouvert, et pas à chaque fois que le lien est cliqué.

    <a href="#link" data-toggle="collapse" data-target=".navbar-collapse.in">Link</a>

    http://codeply.com/go/bp/lbIb5ZaHbq

  4. 3

    Exemple de balisage comme de la Bootstrap, documentation:

    <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="example-auto-collapse">

    Près sur l'élément de menu cliquez sur

    Ajouter à votre Javascript en conséquence:

    $('#example-auto-collapse').on('click', 'a:not(.dropdown-toggle)', function(e) {
    $('#example-auto-collapse.in').collapse('hide');
}

    Alternative: la Proximité avec clic

    Comme Charlie Dalsass a suggéré qu'il serait peut-être préférable de fermer le menu en cliquant sur la page. Pour cela, vous pouvez remplacer le code Javascript ci-dessus avec les éléments suivants:

    $('body').click(function(e) {
    //don't close when opening a sub-menu in our menu
    if(!$(e.target).filter('#example-auto-collapse .dropdown-toggle').length > 0) {
        $('#example-auto-collapse.in').collapse('hide');
    }
}

    Même plus propre omi serait de lier et de délier ce gestionnaire lorsque le menu s'ouvre/se ferme et éviter de courir le gestionnaire en vain, à chaque clic de l'utilisateur. Il est très rare d'avoir une incidence sensible.

    J'ai créé une pile d'échange de compte juste pour upvote la réponse par Skelly pour sa simplicité. Alors j'ai trouvé comment on ne peut pas upvote sans réputation. Alors j'ai trouvé comment cette solution pauses ScrollSpy. Maintenant, c'est la solution qui fonctionne le mieux pour moi, sans effets secondaires indésirables.

  5. 1

    Au cas où quelqu'un d'autre est intéressé, j'ai trouvé une solution ailleurs. C'est magnifiquement simple.

    Ajouter ce code à votre balise:

    <nav class="nav-main nav-collapse collapse" id="hideonclick" role="navigation">

    Et les ajouter à vos JS:

    $('#hideonclick a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
                if ($('.btn').is(":visible"))
                    $('.btn').click();
            });
  6. 1

    Si vous utilisez le sous-menu, vous devez modifier @user2562923 du code comme suit :

            $('.navbar-collapse a').click(function (e) {
            if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
                $('.navbar-collapse').collapse('toggle');
            }
        });
  7. 0

    Être conscient que l'approche pour ajouter les données de la bascule des données et de la cible les attributs de l'élément d'ancrage ne fonctionne pas avec scrollspy configuré. BS est ScrollSpy ne peut pas activer l'option de menu plus.