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

Posted 2023-03-24

【中文标题】引导导航栏折叠未在单击时关闭

【英文标题】：Bootstrap Navbar Collapse not closing on Click

【发布时间】：2015-04-12 21:56:04

【问题描述】：

我正在使用 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;
);

这是一个非常简单的脚本，但我不知道该怎么做才能使导航栏崩溃。

【参考方案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>

【讨论】：

完美且有意义。想法是将数据和数据目标结合起来?。

完美解决方案

【参考方案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');
    );
);

【参考方案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) 我在第 3 行的 "hvr-bounce-to-bottom" 之后的类中添加了类 "collapsed" 应该允许它默认折叠，并且仅在用户打开时显示。

这应该有助于在清理它时修复它。此外，您的导航栏中是否有一个下拉菜单，当您切换时需要恢复您列出的主按钮以外的其他按钮？似乎还没有，只是要求确保它清楚。

【讨论】：

很抱歉，但我做了你描述的一切，我知道它确实应该工作 - 但毕竟它没有。不知何故感觉很愚蠢：D

真的吗？我为我使用 JSFiddle 在我的手机上提取了它，它可以工作。默认情况下折叠，具有 3 个图像图标栏，单击时打开和关闭。 LG G3。 jsfiddle.net/camdixon/v2gosj5s

你能在你的手机上为我测试 JSFiddle 吗？让我知道它是怎么做的。这样我可以确定它为您提供新版本（可能总是一些旧的缓存版本）。这样我们就避免了手机/电脑使用缓存版本。

令人着迷：您的演示有效，我仔细检查了所有代码...也许是平滑滚动插件导致了问题。

如果您不每次都清除它，可能是缓存版本。通常是这样或奇怪的冲突。我浪费了很多时间，只是试图找出我的项目中的哪个。哈哈，祝你好运！

【参考方案4】：

这对我有用：

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

【讨论】：

其他答案有很多深度和细节。两者都会大大改善这个答案。

【参考方案5】：

上述解决方案和 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 中的媒体查询值（参见 @screen-sm-min in less）。

【讨论】：

我在 github 上的引导程序中添加了一个问题（功能？）：github.com/twbs/bootstrap/issues/16189

看起来不会在 bootstrap 3.x 中修复。希望在 4。github.com/twbs/bootstrap/issues/16189。另请参阅我对 camdixon 的 jsfiddle 的变体。它强调了这个问题：jsfiddle.net/mikeedson/v2gosj5s/17

【参考方案6】：

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

【讨论】：

虽然这个答案可能是正确且有用的，但最好在其中附上一些解释来解释它如何帮助解决问题。如果有更改（可能不相关）导致它停止工作并且用户需要了解它曾经是如何工作的，这在未来变得特别有用。

【参考方案7】：

这个小的 jquery sn-p 是这样工作的： 如果导航栏被展开，什么也不会发生，所以不会闪烁（正常的引导行为）。 如果导航栏被折叠，在点击事件之后，关闭导航栏。 在引导程序 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/popper.js@1.16.0/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>

【参考方案8】：

您只需要在导航栏代码中添加 data-toggle 和 data-target 即可。其中使用了 class="collapse navbar-collapse navbar-collapse。

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

主页（当前） 吉他（当前） 落下 美国宇航局图片 另一个动作 这里有别的东西 已禁用