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

我使用Bootstrap4创建了这个可折叠的导航栏，它工作得很好，但我希望在用户单击链接时关闭它。有办法吗？谢谢

html导航栏：

<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>

---

更新2021-Bootstrap 5（测试版）

使用javascript在菜单项上添加单击事件侦听器以关闭折叠导航栏

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => {
    l.addEventListener('click', () => { bsCollapse.toggle() })
})

或，使用每个链接上标记中的

数据bs toggle

和

数据bs target

数据属性来切换折叠导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Disabled</a>
                </li>
            </ul>
            <form class="d-flex my-2 my-lg-0">
                <input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

或（也许是更好的方法）像这样使用jQuery

<ul class="navbar-nav mr-auto">
     <li class="nav-item active">
         <a class="nav-link" href="#home" data-toggle="collapse" data-target=".navbar-collapse.show">Home <span class="sr-only">(current)</span></a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
     </li>
     <li class="nav-item">
         <a class="nav-link" href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.show">Pricing</a>
     </li>
 </ul>

$('.navbar-nav>li>a').on('click', function(){
    $('.navbar-collapse').collapse('hide');
});

---

您可以调用

$.collapse（'hide'）与链接上的事件处理程序


$（'.nav link'）。在（'click'，function（）上{
$（'.navbar collapse'）。collapse（'hide'）；
});
.navbar切换器.图标栏{
利润率：7px；
显示：块；
宽度：22px；
高度：1px；
背景色：#中交；
边界半径：1px；
}









在尝试上述解决方案时，我错过了一个下拉切换的解决方案，所以给你！还将打开子菜单项

如果您的toggle类不同，可能您必须对其进行一些调整

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

我使用ANGULAR，因为它给我带来了问题，routerLink只需在li标记中添加数据切换和目标。。。。或者像“ZimSystem”一样使用jquery





伊尼西奥


我使用的是带助推器4的Angular 5。这对我来说很有用


$（文档）。在（'click'，'）上。导航栏导航>li>a、.navbar品牌，.下拉菜单>a'，功能（e）{
if（$（e.target）.is（'a'）&&（$（e.target）.attr（'class'）！=“导航链接下拉切换”）{
$（'.navbar collapse'）。collapse（'hide'）；
}
});
}





登录


{{{u myAuthService.userDetails.displayName}




注销


只使用角度为2/4的模板而不进行编码的最简单方法：

<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>



Home
关于
组合
联系人

此代码模拟单击burguer按钮关闭导航栏，方法是单击菜单中的链接，保持淡出效果。angular 7的typescript解决方案。避免routerLink问题

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>

ToggleNavBar（）{
让元素：HTMLElement=document.getElementsByClassName（'navbar toggler'）[0]作为HTMLElement；
if（element.getAttribute（'aria expanded'）=='true'）{
元素。单击（）；
}
}

链接1

这是一种解决方案，在单击锚定按钮时关闭菜单，然后在列表项中应用此行

     data-target="#sidenav-collapse-main" data-toggle="collapse"

下面是对我有效的真实例子

      <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>


使用者

您可以使用单击并关闭的简单绑定，如下所示：
（单击）=“drawer.close（）

在标签中添加以下代码

data-toggle="collapse" data-target=".navbar-collapse.show"

如下所示，在每个标签中

<li class="nav-item">
   <a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
</li>



您好，谢谢您的回复，但当我这样做时，它不会折叠导航栏，而是折叠它与scrollspy链接的div元素。有什么建议吗？谢谢。请记住，您可以对BS 4中的图标栏使用
。您可以在导航栏中使用
导航栏反转
将所有文本颜色更改为白色（或透明白色）@Zim-您必须将
数据切换
和
数据目标
设置为父元素（
li
），否则scrollspy将无法工作。也许您应该编辑您的答案。：）在a-href中添加标记不起作用。浏览器会触发关闭菜单，并且永远不会到达href链接。我认为最终的解决方案是使用JavaScriptThank，你为我节省了时间。我正在使用Angular 6和bootstrap 4.1.3。Applied
data toggle=“collapse”data target=“.navbar-collapse.show“
包括下拉列表li在内的li。这个答案非常简洁、完美！对于使用Bootstrap<5的项目非常有用，框架可以改变dom，比如Angular、React。您的解决方案工作得很好，但是您的fiddle示例看起来已经崩溃了。为什么这个答案不在顶部？这个答案更短，而且可能更快：
$（“.navbar nav li a:不是（'.dropdown toggle'））。在（'click'，function（）{$（'.navbar collapse'）。collapse（'hide'）；}
使用jQuery提出的解决方案在Angular 7中无法正常工作，并且加载很慢。
data-toggle="collapse" data-target=".navbar-collapse.show"

<li class="nav-item">
   <a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
</li>