引导导航栏折叠在单击时未关闭

Question

我正在使用 Bootstrap，它在单页网站上折叠了导航栏以及一个简单的滚动脚本，因此如果我单击单个链接，页面会向下滚动到锚点 - 效果很好。然而，当我单击涵盖移动设备上大量内容的链接时，导航栏不会折叠 - 您首先必须单击切换按钮，这很烦人。我发现它应该有助于将 data-toggle 和 data-target 属性添加到链接中，但它根本不起作用 - 我的错误在哪里？

导航：

<nav class="navbar navbar-default mainbar" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle hvr-bounce-to-bottom" data- toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>

    <div class="collapse navbar-collapse navbar-collapse">
      <ul class="nav navbar-nav">
         <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link1" class="navelement">Link 1</a></li>

         <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link2" class="navelement">Link 2</a></li>

       </ul>
     </div>
</nav>

更新：这是一个 JavaScript 问题。我的平滑滚动脚本导致了一个问题：

  var corp = $("html, body");
  $(".navelement").click(function() {
    var flag = $.attr(this, "href");
    corp.animate({
        scrollTop: $(schild).offset().top - 60
    }, 1600, function() {
        window.location.hash = flag;
    });
    return false;
});

这是一个非常简单的脚本，但我不知道如何使用它来使导航栏折叠。

Answer 1

使用上面的示例，对我有用的是将 data-toggle="collapse" data-target=".navbar-collapse" 添加到外部 div

<div class="collapse navbar-collapse" id="my-navbar-collapse">

<div class="collapse navbar-collapse" id="my-navbar-collapse" toggle="collapse" data-target=".navbar-collapse">

更改后整个菜单看起来像这样：

 <nav class="navbar navbar-expand-xl navbar-light bg-light">
  <a class="navbar-brand" href="#">Main</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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" data-toggle="collapse" data-target=".navbar-collapse" >
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" routerLink="/home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" routerLink="/guitars">Guitars <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" routerLink="/nasa-image">NASA Image</a>
          <a class="dropdown-item disabled" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item disabled" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
   
  </div>
    </nav>

Answer 2

我知道这有点晚了，即使在 Bootstrap 4.0.0-alpha.6 中也是如此；选择菜单项后，导航栏不会自然关闭。 Bootsrap 的文档已经变得更好 - 但没有关于如何在选择新菜单后关闭导航栏的明确示例。

在你的 html 文件中 - 你转到折叠类的目标 div - 我在下面播种的 div 来自 Bootstrap 站点 - 所以该注释没有任何变化：

<div class="collapse navbar-collapse" id="navbarSupportedContent">

您使用该 id 来监视导航栏是否展开（脱离折叠模式），然后我向导航栏中的 a.nav-links 添加了一个单击事件，以重新折叠导航栏：

$("#navbarSupportedContent").on('show.bs.collapse', function() {
    $('a.nav-link').click(function() {
        $("#navbarSupportedContent").collapse('hide');
    });
});

Answer 3

我建议您仔细阅读此内容以帮助您解决问题。 http://getbootstrap.com/components/#navbar 似乎就是你所依据的。主要是，当您查看@该链接时，查看您拥有的第一个按钮行并进行比较，因为这是移动版本上的主要下拉列表，正如您提到的，它占用了大量的屏幕空间。

<nav class="navbar navbar-default mainbar" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle hvr-bounce-to-bottom collapsed" data-toggle="collapse" data-target="#my-navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>

    <div class="collapse navbar-collapse" id="my-navbar-collapse">
      <ul class="nav navbar-nav">
         <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link1" class="navelement">Link 1</a></li>

         <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link2" class="navelement">Link 2</a></li>

       </ul>
     </div>
</nav>

1）我将这部分

data- toggle="collapse"

更改为

data-toggle="collapse"

。第 3 行只是多了一个空格。

2) 我在下拉列表中添加了一个 id，而不是一个类，以更具体地标识（可能无关紧要），并将名称更改为“my-navbar-collapse”。此更改是在第 3 行和第 11 行进行的。之前也是如此意味着您只是在同一个元素上使用同一个类两次，这是没有意义的。

3）我将类

"collapsed"

添加到位于

"hvr-bounce-to-bottom"

之后的第3行的类中，应该允许它默认折叠，并且仅在用户打开时才显示。

这应该有助于修复它并清理它。另外，您的导航栏中是否有一个下拉菜单，当您切换除列出的主按钮之外的其他按钮时，需要将其恢复？目前看来还不是这样，只是想确保它清楚。

Answer 4

这对我有用：

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

Answer 5

这个 jquery 小片段的工作方式如下：如果导航栏展开，则不会发生任何事情，因此不会闪烁（正常引导行为）。如果导航栏折叠，则在单击事件后关闭导航栏。适用于引导程序 4

  $(".navbar a").click(function(event) {
      // check if window is small enough so dropdown is created
      var toggle = $(".navbar-toggler").is(":visible");
      if (toggle) {
          $(".navbar-collapse").collapse('hide');
      }
  });

.wrapper {
    height: 400px;
}

#div1 {
    background-color: #73683b;
}

#div2 {
    background-color: #B0A084;
}

#div3 {
    background-color: #E9E6FF;
}

#div4 {
    background-color: #B3679B;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container px-0">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mx-0">
            <a class="navbar-brand" href="#">Logo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#div1">Link 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#div2">Link 2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#div3">Link 3</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#div4">Link 4</a>
                    </li>
            </div>
        </nav>
    </div>

    <div class="container wrapper d-flex flex-column justify-content-center" id="div1">
        <p class="text-center">DIV 1</p>
    </div>
    <div class="container wrapper d-flex flex-column justify-content-center" id="div2">
        <p class="text-center">DIV 2</p>
    </div>
    <div class="container wrapper d-flex flex-column justify-content-center" id="div3">
        <p class="text-center">DIV 3</p>
    </div>
    <div class="container wrapper d-flex flex-column justify-content-center" id="div4">
        <p class="text-center">DIV 4</p>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

Answer 6

只需使用 span 标签并添加 data-bs-toggle="collapse"` data-bs-target=".navbar-collapse" 并将该 span 标签放在锚标签中。下面是代码

  <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="/"><span data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse">Home</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#About"><span data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse">About</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#Contact"><span data-bs-target="#navbarSupportedContent" data-bs-toggle="collapse">Contact</span></a>
                        </li>

                    </ul>
                </div>
            </div>
        </nav>

Answer 7

对于 bootstrap v5，只需在锚标记上添加 data-bs-target="#navbarNav" data-bs-toggle="collapse" 例子

<a class="nav-link active " data-bs-target="#navbarNav" data-bs-toggle="collapse" aria-current="page" href="#">Home</a>

首页

Answer 8

上述解决方案和 JSFiddle (jsfiddle.net/camdixon/v2gosj5s) 的唯一问题是，当您不在移动设备上且菜单未折叠时，菜单项会闪烁。例如。它们在原地倒塌并在原地重新打开。

重复：展开 JSFiddle 结果的窗口，以便菜单不折叠，然后单击导航栏项。

除了 JSFiddle 版本之外，我还通过更改 bootstrap.js 中的折叠数据 api 解决了该问题，如下所示：

//Bootstrap v3.3.4
//line 662:
Collapse.prototype.toggle = function () {

//Added code: 
var mq = window.matchMedia('screen and (min-width: 768px)')
if (mq.matches) return
//End added code

this[this.$element.hasClass('in') ? 'hide' : 'show']()
}

我不想对最小宽度进行硬编码，但还不知道如何访问CSS中的媒体查询值（请参阅less中的@screen-sm-min）。

Answer 9

$(document).ready(function () {
        $(".navbar-nav li.trigger-collapse a").click(function(event) {
          $(".navbar-collapse").collapse('hide');
        });
      });

Answer 10

您只需在导航栏代码中添加数据切换和数据目标即可。其中使用了 class="collapse navbar-collapse navbar-collapse 。

 <div class="collapse navbar-collapse navbar-collapse" data-toggle="collapse" data-target="#navbar-collapse">

主页（当前）吉他（当前）落下美国宇航局图像另一个动作这里还有其他东西残疾人

Answer 11

只需使用 span 标签并向每个链接添加 data-bs-toggle="collapse"` data-bs-target=".navbar-collapse" 即可。最后这在我的项目中起作用了。

<NavLink exact="true" className="nav-link" to="/">`<span data-bs-toggle="collapse"` data-bs-target=".navbar-collapse">Home</span></NavLink>

Answer 12

就我而言，选项卡有奇怪的行为，并且由于我的 vue :class 绑定而没有关闭

<router-link class="nav-link text-light" :class="{active: checker}" to="/ideas">

这个变体有效

<router-link class="nav-link text-light" to="/ideas">

Answer 13

问题是我在

bootstrap.bundle.min.js

中同时拥有

bootstrap.min.js

和

head

。

删除其中之一即可。

引导导航栏折叠在单击时未关闭

问题描述投票：0回答：13

13个回答

最新问题

引导导航栏折叠在单击时未关闭

问题描述 投票：0回答：13

13个回答

最新问题

问题描述投票：0回答：13