bootstrap 4 effondrement navbar problème - besoin de clarification d'un autre poste

Je tente de configurer ma barre de navigation effondrée (visible uniquement sur mobile) de sorte que lorsque quelqu'un clique sur un lien dans le bascule, ou le bascule lui-même, ou n'importe où sur la page, la barre de navigation se ferme. J'ai regardé cette question, mais je suis incapable de commenter et poser des questions à ce sujet en tant qu'utilisateur assez nouveau pour dépassement de la pile: How to hide collapsible Bootstrap 4 navbar on click bootstrap 4 effondrement navbar problème - besoin de clarification d'un autre poste

La solution javascript dans le top réponse ne fonctionne pas, et quand je demande un data-bascule & data-target au lien, cela fonctionne pour fermer la barre de navigation mais plus de liens n'importe où (il est simplement lié à plus bas sur la page). J'ai aussi regardé d'autres versions de cette question mais les solutions javascript n'ont pas fonctionné, car elles sont généralement ciblées vers une barre de navigation qui utilise une liste non ordonnée, ce qui n'est pas le cas pour moi. J'ai essayé d'éditer le JS pour répondre à mes besoins mais ça n'a pas marché.

<nav class="navbar navbar-inverse navbar-toggleable-sm fixed-top" style="box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;" id="mainNav"> 

     <div class="container" style="box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;"> 

     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle Navigation"> 
      <span class="navbar-toggler-icon"></span> 
      </button> 

     <a class="navbar-brand mr-auto js-scroll-trigger" href="#page-top">Logo</a> 

      <div class="collapse navbar-collapse ml-auto" id="navbarResponsive" style="box-sizing:border-box;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;"> 

      <div class="navbar-nav navMenuBox"> 
      <a class="nav-item nav-link navmenu js-scroll-trigger" href="#howto" data-toggle="collapse" data-target=".navbar-collapse.show">How to Use</a> 
      <a class="nav-item nav-link navmenu js-scroll-trigger" href="#mappy">Map</a> 
      <a class="nav-item nav-link navmenu js-scroll-trigger" href="#about">About</a> 
      </div><!--navbar-nav--> 
     </div><!--collapse--> 


     </div><!--container--> 
    </nav>

Source

2017-08-25 Ailis

les solutions javascript n'ont pas travaillé, parce qu'ils sont généralement ciblés sur une barre de navigation qui utilise une liste non ordonnée, ce qui est à moi pas.

Pouvez-vous afficher le javascript pré-modifié? Probablement la solution la plus simple est de cibler votre liste ordonnée.

Source

2017-08-25 20:32:03 hip

ici est celui que j'ai essayé: $ (document) .ready (function() { $ (document) .cliquer (function (event) {var clickover = $ (event.target); var _opened = $ (". navbar-collapse"). hasClass ("navbar-collapse dans"); if (_opened === true &&! clickover.hasClass ("navbar-toggle")) { $ ("button.navbar -toggle "). click(); } }); }); en voici un autre: $ ('. Navbar-nav> li> a'). On ('click', function() { $ ('. Navbar-collapse'). Collapse ('hide'); }); – Ailis

Désolé? Pas de lien ni code – hip

désolé, je frappe accidentellement entrer sans décalage! J'ai édité pour inclure le code bien qu'il n'ait pas formaté correctement avec le balisage, désolé. aucun de ceux-ci n'a ciblé une liste donc je ne sais pas pourquoi ils ne fonctionnent pas. – Ailis

bootstrap 4 effondrement navbar problème - besoin de clarification d'un autre poste

Répondre

Questions connexes