简体   繁体   English

Bootstrap Navbar不与Smooth Scroll脚本合拢

[英]Bootstrap Navbar not collapsing with Smooth Scroll Script

I'm using the Bootstrap Navbar on a one-page website and each anchor is linked to a section on the page. 我在一页网站上使用Bootstrap导航栏,每个锚点都链接到页面上的一个部分。 I'm using a very simple javascript to smooth scroll to each section, however this somehow conflicts the collapse function of the navbar - when I click on a link it doesn't collapse anymore which is annoying. 我正在使用一个非常简单的JavaScript平滑滚动到每个部分,但是这在某种程度上与导航栏的折叠功能冲突-当我单击链接时,它不再折叠了,这很烦人。 I first thought it might be a HTML problem (solved here: Bootstrap Navbar Collapse not closing on Click ) but figured out it is a JS problem - any ideas? 我首先认为这可能是HTML问题(在此处解决: Bootstrap Navbar折叠未在Click上关闭 ),但发现这是一个JS问题-有什么想法吗?

HTML: HTML:

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

JAVASCRIPT: 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;
});

you can use jQuery :not selector-utility 您可以使用jQuery:not selector-utility

eg 例如

$('a[href*=#]:not([href=#], [data-toggle=collapse])').click(function(){...})

or in your example: 或在您的示例中:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM