Bootstrap Navbar Collapse 不會在點擊時關閉

Question

我正在使用 Bootstrap，它在單頁網站上折疊了 Navbar 以及一個簡單的滾動腳本，因此如果我單擊單個鏈接，頁面將向下滾動到錨點 - 效果很好。 但是，當我單擊一個包含移動設備上大量內容的鏈接時，導航欄不會崩潰 - 您首先必須單擊令人討厭的切換按鈕。 我發現將 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）I改變這部分data- toggle="collapse"到data-toggle="collapse" 。 第 3 行只有一個額外的空間。

2）我在您的下拉列表中添加了一個 id 而不是一個類來更具體地標識（可能無關緊要），並將名稱更改為“my-navbar-collapse” 此更改是在第 3 行和第 11 行進行的。這之前也意味着你只是在同一個元素上使用同一個類兩次，這是沒有意義的。

3）我在位於"hvr-bounce-to-bottom"之后的第3行添加了"collapsed"類到您的類中應該允許它默認折疊，並且僅在用戶打開時顯示。

這應該有助於修復它，因為它會清理它。 另外，當您切換而不是列出的主按鈕時，您的導航欄中是否有一個下拉菜單需要重新打開？ 似乎還沒有，只是要求確保它清楚。

Answer 4

這對我有用：

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

Answer 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）。

Answer 6

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

Answer 7

這個小的 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/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>

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

主頁 (current) 吉他 (current) Dropdown NASA Image 另一個動作 其他東西已禁用

Answer 9

只需使用 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 10

只需使用 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 11

在我的例子中，選項卡有奇怪的行為並且由於我的 vue:class 綁定而沒有關閉

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

這個變體有效

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