當在Booststrap中單擊外部時關閉打開摺疊的導航欄4

我目前使用Bootstrap 4，並且我想在外部單擊時關閉摺疊的導航欄。它只能在您點擊切換按鈕時關閉。當在Booststrap中單擊外部時關閉打開摺疊的導航欄4

此外，當我點擊切換按鈕時導航鏈接出現問題。它打開後，導航鏈接彈跳起來。我無法弄清楚原因。請別人幫我解決我的問題。謝謝！

這裏是我的代碼：

<body> 
<!-- start navbar --> 
<nav class="navbar navbar-light bg-faded navbar-fixed-top"> 
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
    <a class="navbar-brand" href="#"></a> 

    <div class="collapse navbar-toggleable-md" id="main-navbar"> 
     <ul class="nav navbar-nav float-lg-right"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#home">Home</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#section-about">About</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#section-portfolio">Portfolio</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#section-contact">Contact</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#resume">Resume</a> 
     </li> 
     </ul> 
    </div> 
    </nav> 
    <!-- end navbar --> 
</body>

這裏是我的codepen鏈接：

http://codepen.io/marcvs/pen/jVONGM

來源

2017-01-05 marcvs

這是解決問題的方法：

$(document).ready(function() { 
    $(document).click(function (event) { 
     var clickover = $(event.target); 
     var _opened = $(".collapse").hasClass("collapse in"); 

     if (_opened === true && !clickover.hasClass("navbar-toggler")) { 
      $("button.navbar-toggler").click(); 
     } 
    }); 
});

Codepen：http://codepen.io/anon/pen/xgbmqr

其修改版本this answer

來源

2017-01-05 21:37:18 DokiCRO

非常感謝您的幫助。你見過導航鏈接嗎？當導航欄打開時，我遇到了問題，所有鏈接都彈起來了。 – marcvs

對不起，但我現在沒有時間來調試，但你可以看看https://v4-alpha.getbootstrap.com/components/navbar/#collapsible-content，我想你會發現問題嘗試複製粘貼所有內容並再次逐步編輯代碼... – DokiCRO

沒問題，再次感謝您的幫助:)我欣賞 – marcvs

當在Booststrap中單擊外部時關閉打開摺疊的導航欄4

回答

相關問題