blocks|key|4372554|text|您可以在链接上使用事件处理程序调用$.collapse('hide');。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4372555|​|4372556|$('.nav-link').on('click',function()+{
++$('.navbar-collapse').collapse('hide');
});|code-block|syntax|javascript|4372557|.navbar-toggler+.icon-bar+{
++margin:+7px;
++display:+block;
++width:+22px;
++height:+1px;
++background-color:+#cccccc;
++border-radius:+1px;
}|4372558|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link+href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"+rel="stylesheet"/>
<nav+class="navbar+navbar-toggleable-md+fixed-top">
++<button+id="nav-btn"+class="navbar-toggler+navbar-toggler-right"+type="button"+data-toggle="collapse"+data-target="#navbarDiv"+aria-expanded="false"+aria-label="Toggle+navigation">
++++++++<span+class="icon-bar"></span>
++++++++<span+class="icon-bar"></span>
++++++++<span+class="icon-bar"></span>
+</button>
++<div+class="container">
++++<a+class="navbar-brand"+href="#"><img+src="Images/logo.png"+width="60px"></a>
++++<div+class="collapse+navbar-collapse"+id="navbarDiv">
++++++<ul+class="navbar-nav+mr-auto">
++++++++<li+class="nav-item+active">
++++++++++<a+class="nav-link"+href="#home">Home+<span+class="sr-only">(current)</span></a>
++++++++</li>
++++++++<li+class="nav-item">
++++++++++<a+class="nav-link"+href="#about-us">About</a>
++++++++</li>
++++++++<li+class="nav-item">
++++++++++<a+class="nav-link"+href="#pricing">Pricing</a>
++++++++</li>
++++++</ul>
++++</div>
++</div>
</nav>|4372559|4372560|entityMap^0|H|J|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>You can call <code>$.collapse('hide');</code> with an event handler on the links.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.nav-link').on('click',function() {
  $('.navbar-collapse').collapse('hide');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar-toggler .icon-bar {
  margin: 7px;
  display: block;
  width: 22px;
  height: 1px;
  background-color: #cccccc;
  border-radius: 1px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/&gt;
&lt;nav class="navbar navbar-toggleable-md fixed-top"&gt;
  &lt;button id="nav-btn" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
 &lt;/button&gt;
  &lt;div class="container"&gt;
    &lt;a class="navbar-brand" href="#"&gt;&lt;img src="Images/logo.png" width="60px"&gt;&lt;/a&gt;
    &lt;div class="collapse navbar-collapse" id="navbarDiv"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="#home"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#about-us"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="#pricing"&gt;Pricing&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/nav&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4373051|text|通过尝试上面的解决方案，我错过了一个下拉切换的解决方案，所以你来吧！还会打开子菜单项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4373052|如果您的切换类不同，也许您必须对其进行一些调整。|4373053|$('.navbar-nav+li+a').on('click',+function(){
++++if(!$(+this+).hasClass('dropdown-toggle')){
++++++++$('.navbar-collapse').collapse('hide');
++++}
});|code-block|syntax|javascript|4373054|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>With trying out above solutions, I was missing a solution for Dropdown toggles, so here you go! Also opens submenu items.</p>

<p>Maybe you have to tweak it a bit if your toggle class is different. </p>

<pre><code>$('.navbar-nav li a').on('click', function(){
    if(!$( this ).hasClass('dropdown-toggle')){
        $('.navbar-collapse').collapse('hide');
    }
});
</code></pre>


blocks|key|4373063|text|我使用的是ANGULAR，由于它给我带来了问题，routerLink只需在li标记中添加数据切换和目标……或者使用像"ZimSystem“这样的jquery|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4373064|​|4373065|<div+class="collapse+navbar-collapse"+id="navbarSupportedContent">
++++++<ul+class="navbar-nav+mr-auto">
++++++++<li+class="nav-item"+data-toggle="collapse"+data-target=".navbar-collapse.show">
++++++++++<a+class="nav-link"+routerLink="/inicio"+routerLinkActive="active"+>Inicio</a>
++++++++</li>
++++++</ul>
</div>|code-block|syntax|javascript|4373066|4373067|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>I am using ANGULAR and since it gave me problems the routerLink just add the data-toggle and target in the li tag.... or use jquery like "ZimSystem"</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show"&gt;
          &lt;a class="nav-link" routerLink="/inicio" routerLinkActive="active" &gt;Inicio&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4372645|text|我使用的是Angular+5和Boostrap+4，它是这样工作的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4372646|​|4372647|+$(document).on('click',+'.navbar-nav>li>a,+.navbar-brand,+.dropdown-menu>a',+function+(e)+{
++++++if+(+$(e.target).is('a')+&&+$(e.target).attr('class')+!=+'nav-link+dropdown-toggle'+)+{
++++++++$('.navbar-collapse').collapse('hide');
++++++}
++++});
+++}|code-block|syntax|javascript|4372648|<nav+class="navbar+navbar-expand-lg+navbar-dark+bg-primary">
++<a+class="navbar-brand"+[routerLink]="['/home']">FbShareTool</a>
++<button+class="navbar-toggler"+type="button"+data-toggle="collapse"+data-target="#navbarColor01"+aria-controls="navbarColor01"+aria-expanded="false"+aria-label="Toggle+navigation"+style="">
++++<span+class="navbar-toggler-icon"></span>
++</button>

++<div+class="collapse+navbar-collapse"+id="navbarColor01">
++++<ul+class="navbar-nav+mr-auto">
++++++<li+class="nav-item+active"+*ngIf="_myAuthService.isAuthenticated()">
++++++++<a+class="nav-link"+[routerLink]="['/dashboard']">Dashboard+<span+class="sr-only">(current)</span></a>
++++++</li>
++++++<li+class="nav-item+dropdown"+*ngIf="_myAuthService.isAuthenticated()">
++++++++++<a+class="nav-link+dropdown-toggle"+href="#"+id="navbarDropdown"+role="button"+data-toggle="dropdown"+aria-haspopup="true"+aria-expanded="false">
++++++++++++Manage
++++++++++</a>
++++++++++<div+class="dropdown-menu"+aria-labelledby="navbarDropdown">
++++++++++++<a+class="dropdown-item"+[routerLink]="['/fbgroup']">Facebook+Group</a>
++++++++++++<div+class="dropdown-divider"></div>
++++++++++++<a+class="dropdown-item"+href="#">Fetch+Data</a>
++++++++++</div>
++++++</li>
++++</ul>

++++<ul+class="navbar-nav+navbar-right+navbar-right-link">
++++++++<li+class="nav-item"+*ngIf="!_myAuthService.isAuthenticated()"+>
++++++++++++<a+class="nav-link"+(click)="logIn()">Login</a>
++++++++</li>
++++++++<li+class="nav-item"+*ngIf="_myAuthService.isAuthenticated()">
+++++++++++<a+class="nav-link">{{+_myAuthService.userDetails.displayName+}}</a>
++++++++</li>
++++++++<li+class="nav-item"+*ngIf="_myAuthService.isAuthenticated()+&&+_myAuthService.userDetails.photoURL">
++++++++++++<a>
++++++++++++++<img+[src]="_myAuthService.userDetails.photoURL"+alt="profile-photo"+class="img-fluid+rounded"+width="40px;">
++++++++++++</a>
++++++++</li>
++++++++<li+class="nav-item"+*ngIf="_myAuthService.isAuthenticated()">
++++++++++++<a+class="nav-link"+(click)="logOut()">Logout</a>
++++++++</li>
++++</ul>

++</div>
</nav>|4372649|4372650|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>I am using Angular 5 with Boostrap 4. It works for me in this way.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code> $(document).on('click', '.navbar-nav&gt;li&gt;a, .navbar-brand, .dropdown-menu&gt;a', function (e) {
      if ( $(e.target).is('a') &amp;&amp; $(e.target).attr('class') != 'nav-link dropdown-toggle' ) {
        $('.navbar-collapse').collapse('hide');
      }
    });
   }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-expand-lg navbar-dark bg-primary"&gt;
  &lt;a class="navbar-brand" [routerLink]="['/home']"&gt;FbShareTool&lt;/a&gt;
  &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style=""&gt;
    &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
  &lt;/button&gt;

  &lt;div class="collapse navbar-collapse" id="navbarColor01"&gt;
    &lt;ul class="navbar-nav mr-auto"&gt;
      &lt;li class="nav-item active" *ngIf="_myAuthService.isAuthenticated()"&gt;
        &lt;a class="nav-link" [routerLink]="['/dashboard']"&gt;Dashboard &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav-item dropdown" *ngIf="_myAuthService.isAuthenticated()"&gt;
          &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
            Manage
          &lt;/a&gt;
          &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
            &lt;a class="dropdown-item" [routerLink]="['/fbgroup']"&gt;Facebook Group&lt;/a&gt;
            &lt;div class="dropdown-divider"&gt;&lt;/div&gt;
            &lt;a class="dropdown-item" href="#"&gt;Fetch Data&lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;

    &lt;ul class="navbar-nav navbar-right navbar-right-link"&gt;
        &lt;li class="nav-item" *ngIf="!_myAuthService.isAuthenticated()" &gt;
            &lt;a class="nav-link" (click)="logIn()"&gt;Login&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item" *ngIf="_myAuthService.isAuthenticated()"&gt;
           &lt;a class="nav-link"&gt;{{ _myAuthService.userDetails.displayName }}&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item" *ngIf="_myAuthService.isAuthenticated() &amp;&amp; _myAuthService.userDetails.photoURL"&gt;
            &lt;a&gt;
              &lt;img [src]="_myAuthService.userDetails.photoURL" alt="profile-photo" class="img-fluid rounded" width="40px;"&gt;
            &lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item" *ngIf="_myAuthService.isAuthenticated()"&gt;
            &lt;a class="nav-link" (click)="logOut()"&gt;Logout&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

  &lt;/div&gt;
&lt;/nav&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4372690|text|最简单的方法是只使用Angular+2/4模板，不需要编码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4372691|<nav+class="navbar+navbar-default"+aria-expanded="false">
++<div+class="container-wrapper">

++++<div+class="navbar-header">
++++++<button+type="button"+class="navbar-toggle+collapsed"+(click)="isCollapsed+=+!isCollapsed">
++++++++<span+class="icon-bar"></span>
++++++++<span+class="icon-bar"></span>
++++++++<span+class="icon-bar"></span>
++++++</button>
++++</div>

++++<div+class="navbar-collapse+collapse+no-transition"+[attr.aria-expanded]="!isCollapsed"+[ngClass]="{collapse:+isCollapsed}">
++++++<ul+class="nav+navbar-nav"+(click)="isCollapsed+=+!isCollapsed">
++++++++<li+[routerLinkActive]="['active']"+[routerLinkActiveOptions]="{exact:+true}"><a+routerLink="/">Home</a></li>
++++++++<li+[routerLinkActive]="['active']"><a+routerLink="/about">About</a></li>
++++++++<li+[routerLinkActive]="['active']"><a+routerLink="/portfolio">Portfolio</a></li>
++++++++<li+[routerLinkActive]="['active']"><a+routerLink="/contacts">Contacts</a></li>
++++++</ul>
++++</div>

++</div>
</nav>|code-block|syntax|javascript|4372692|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The easiest way to do it using only Angular 2/4 template with no coding:</p>

<pre><code>&lt;nav class="navbar navbar-default" aria-expanded="false"&gt;
  &lt;div class="container-wrapper"&gt;

    &lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;

    &lt;div class="navbar-collapse collapse no-transition" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}"&gt;
      &lt;ul class="nav navbar-nav" (click)="isCollapsed = !isCollapsed"&gt;
        &lt;li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"&gt;&lt;a routerLink="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li [routerLinkActive]="['active']"&gt;&lt;a routerLink="/about"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li [routerLinkActive]="['active']"&gt;&lt;a routerLink="/portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li [routerLinkActive]="['active']"&gt;&lt;a routerLink="/contacts"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/nav&gt;
</code></pre>


blocks|key|4372734|text|这段代码模拟了点击burguer按钮，通过点击菜单中的一个链接来关闭导航栏，保持淡出效果。使用angular+7的typescript解决方案。避免routerLink问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4372735|ToggleNavBar+()+{
++++let+element:+HTMLElement+=+document.getElementsByClassName(+'navbar-toggler'+)[+0+]+as+HTMLElement;
++++if+(+element.getAttribute(+'aria-expanded'+)+==+'true'+)+{
++++++++element.click();
++++}
}

<li+class="nav-item"+[routerLinkActive]="['active']">
++++<a+class="nav-link"+[routerLink]="['link1']"+title="link1"+(click)="ToggleNavBar()">link1</a>
</li>|code-block|syntax|javascript|4372736|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This code simulates a click on the burguer button to close the navbar by clicking on a link in the menu, keeping the fade out effect. Solution with typescript for angular 7. Avoid routerLink problems.</p>

<pre><code>ToggleNavBar () {
    let element: HTMLElement = document.getElementsByClassName( 'navbar-toggler' )[ 0 ] as HTMLElement;
    if ( element.getAttribute( 'aria-expanded' ) == 'true' ) {
        element.click();
    }
}

&lt;li class="nav-item" [routerLinkActive]="['active']"&gt;
    &lt;a class="nav-link" [routerLink]="['link1']" title="link1" (click)="ToggleNavBar()"&gt;link1&lt;/a&gt;
&lt;/li&gt;
</code></pre>


blocks|key|4373184|text|这是单击锚点时关闭菜单，然后在列表项中应用此行的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4373185|+++++data-target="#sidenav-collapse-main"+data-toggle="collapse"|code-block|syntax|javascript|4373186|下面是对我有效的真实示例|4373187|++++++<li+class="nav-item"+data-target="#sidenav-collapse-main"+data-+
++++++toggle="collapse"+>
++++++<a+class="nav-link"+routerLinkActive="active"+routerLink="/admin/users">
++++++++<i+class="ni+ni-single-02++text-orange"></i>+Users
++++++</a>
++++++</li>|4373188|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>this is the solution to close menu when click on anchor then apply this line in list item </p>

<pre><code>     data-target="#sidenav-collapse-main" data-toggle="collapse"
</code></pre>

<p>the real example that work for me is below</p>

<pre><code>      &lt;li class="nav-item" data-target="#sidenav-collapse-main" data- 
      toggle="collapse" &gt;
      &lt;a class="nav-link" routerLinkActive="active" routerLink="/admin/users"&gt;
        &lt;i class="ni ni-single-02  text-orange"&gt;&lt;/i&gt; Users
      &lt;/a&gt;
      &lt;/li&gt;
</code></pre>


blocks|key|4373224|text|您可以在单击并关闭时使用简单的绑定，如下所示：(click)="drawer.close()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4373225|<a+class="nav-link"+[routerLink]="navItem.link"+routerLinkActive="selected"+(click)="drawer.close()">|code-block|syntax|javascript|4373226|entityMap^0|N|N|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You can use a simply bind on click and close, like this: <code>(click)=&quot;drawer.close()</code></p>
<pre><code>&lt;a class=&quot;nav-link&quot; [routerLink]=&quot;navItem.link&quot; routerLinkActive=&quot;selected&quot; (click)=&quot;drawer.close()&quot;&gt;
</code></pre>


blocks|key|4373236|text|在标记中添加以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4373237|data-toggle="collapse"+data-target=".navbar-collapse.show"|code-block|syntax|javascript|4373238|如下所示，在每个标记中|4373239|<li+class="nav-item">
+++<a+class="nav-link"+href="#about-us"+data-toggle="collapse"+data-target=".navbar-collapse.show">About</a>
</li>|4373240|entityMap|0|LINK|mutability|MUTABLE|url|1^0|1|9|0|0|0|0|B|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|K|3|L|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|-4]]|T|$5|P|Q|R|C|$S|-4]]]]

<p>add below code in your &lt; a &gt; TAG</p>
<pre><code>data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse.show&quot;
</code></pre>
<p>as shows below in every  TAG</p>
<pre><code>&lt;li class=&quot;nav-item&quot;&gt;
   &lt;a class=&quot;nav-link&quot; href=&quot;#about-us&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse.show&quot;&gt;About&lt;/a&gt;
&lt;/li&gt;
</code></pre>


blocks|key|4373255|text|引导程序5|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4373256|/*+FOR+MOBILE+ONLY+*/
if+(window.matchMedia("(max-width:+991px)").matches)+{
++const+navLinks+=+document.querySelectorAll('.nav-+
++item:not(.dropdown)');
++const+menuToggle+=+document.getElementById('navbarToggler');
++const+bsCollapse+=+new+bootstrap.Collapse(menuToggle,+{toggle:+false});
++navLinks.forEach((l)+=>+{
++++l.addEventListener('click',+()+=>+{+bsCollapse.toggle()+})
++});
}|code-block|syntax|javascript|4373257|设置断点(991表示"navbar-expand-lg")|4373258|在您的HTML中:设置ID，data-bs-target...|4373259|对我来说很好|4373260|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>BOOTSTRAP 5</p>
<pre><code>/* FOR MOBILE ONLY */
if (window.matchMedia(&quot;(max-width: 991px)&quot;).matches) {
  const navLinks = document.querySelectorAll('.nav- 
  item:not(.dropdown)');
  const menuToggle = document.getElementById('navbarToggler');
  const bsCollapse = new bootstrap.Collapse(menuToggle, {toggle: false});
  navLinks.forEach((l) =&gt; {
    l.addEventListener('click', () =&gt; { bsCollapse.toggle() })
  });
}
</code></pre>
<p>Set your breakpoint (991 for &quot;navbar-expand-lg&quot;)</p>
<p>In your HTML: set the ID, data-bs-target...</p>
<p>Work nice for me</p>


blocks|key|4372867|text|我已经修改了Zim的答案。现在，代码仅在导航栏打开时才关闭导航栏。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4372868|const+navLinks+=+document.querySelectorAll('.nav-item')
const+menuToggle+=+document.getElementById('navbarSupportedContent')
const+bsCollapse+=+new+bootstrap.Collapse(menuToggle,+{
++toggle:+false
})
navLinks.forEach((l)+=>+{
++++l.addEventListener('click',+()+=>+{
++++++++if(bsCollapse._isShown()){
++++++++++++bsCollapse.hide()
++++++++}
++++})
})|code-block|syntax|javascript|4372869|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have modified the answer of Zim.
Now the code closes the navbar only in case it is open.</p>
<pre><code>const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle, {
  toggle: false
})
navLinks.forEach((l) =&gt; {
    l.addEventListener('click', () =&gt; {
        if(bsCollapse._isShown()){
            bsCollapse.hide()
        }
    })
})
</code></pre>


<p>I've created this collapsable navbar using Bootstrap 4 that works nicely, but I would like it to close when the user clicks on a link. Any way to do this?  Thanks</p>

<p>html navbar:</p>

<pre><code>&lt;nav class="navbar navbar-toggleable-md fixed-top"&gt;

&lt;button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv"  aria-expanded="false" aria-label="Toggle navigation"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
 &lt;/button&gt;

            &lt;div class="container"&gt;

                &lt;a class="navbar-brand" href="#"&gt;&lt;img src="Images/logo.png" width="60px"&gt;&lt;/a&gt;

                    &lt;div class="collapse navbar-collapse" id="navbarDiv"&gt;

                        &lt;ul class="navbar-nav mr-auto"&gt;

                            &lt;li class="nav-item active"&gt;

                                &lt;a class="nav-link" href="#home"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;

                            &lt;/li&gt;

                            &lt;li class="nav-item"&gt;

                                &lt;a class="nav-link" href="#about-us"&gt;About&lt;/a&gt;

                            &lt;/li&gt;

                            &lt;li class="nav-item"&gt;

                                &lt;a class="nav-link" href="#pricing"&gt;Pricing&lt;/a&gt;

                            &lt;/li&gt;

                        &lt;/ul&gt;

                    &lt;/div&gt;

            &lt;/div&gt;

        &lt;/nav&gt;
</code></pre>

<p>css for .icon-bar, since Bootstrap 4 doesn't use the icon-bar class.</p>

<pre><code>.navbar-toggler .icon-bar {
  margin: 7px;
  display: block;
  width: 22px;
  height: 1px;
  background-color: #cccccc;
  border-radius: 1px;
}
</code></pre>


How to hide collapsible Bootstrap navbar on click

我使用Bootstrap 4创建了这个可折叠的导航栏，它工作得很好，但我希望它在用户单击链接时关闭。有办法做到这一点吗？谢谢html导航栏：<nav class="navbar navbar-toggleable-md fixed-top"><button id="nav-btn"class="navbar-toggl...

问如何在单击时隐藏可折叠引导导航栏
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击时隐藏可折叠引导导航栏EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在单击时隐藏可折叠引导导航栏
EN