BootStrap 3上的Navbar-spy不允许外部链接 [英] Navbar-spy on BootStrap 3 not allowing external links

问题描述

我试图在导航栏（如博客）的末尾添加外部链接，并有一个额外的下拉列表链接到其他.html文件，但它不会工作。

Been trying to add external links at the end of my navbar (such as Blog), and an additional dropdown linking to other .html files, but it just won't work.

这里是代码。我应该修改哪些内容以允许这些非#link？

Here's the code. What should I modify to allow these non #links ?

<div id="navbar-section" class="navbar navbar-static-top">
  <div class="container">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <div id="navbar-spy" class="nav-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#home"><i class="icon-home"></i></a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Infos <span class="caret"></span></i></a>
              <ul class="dropdown-menu">
                <li class="nav-header">Menu 1</li>
                <li>
                  <a href="external1.html">external 1</a>
                </li>
                <li>
                  <a href="external2.html">external 2</a>
                </li>
                <li class="nav-header">Menu 2</li>
                <li>
                  <a href="external3.html">external 3</a>
                </li>
                <li>
                  <a href="external4.html">external 4</a>
                </li>
                </li>
              </ul>
        </li> 
    </div>
  </div>
</div>

顺便说一下，Dologan给了一个提示，但我不知道如何添加这个，所以它可以解决我的问题。

By the way, Dologan gave a hint (maybe?) on another post dealing with a slight different issue, but I'm not sure how to add this so it can solve my problem.

链接到这里：如何添加平滑滚动到Bootstrap的滚动间谍功能

感谢您的赞赏时间！

- UPDATE -

-- UPDATE --

我发现问题来自，这段代码在custom.js文件中：

I found where the problem was coming from, this piece of code in a custom.js file :

$( '#navbar-spy' ).off( 'click' ).on( 'click', 'a', function( e ) {         

            e.preventDefault();

            var elmHash = $( this ).attr( 'href' );
            var elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
            var windowOffsetTop = Math.ceil( $(window).scrollTop() );

            if( elmOffsetTop != 0 ) {
                elmOffsetTop = elmOffsetTop - 70;
                if( windowOffsetTop == 0 ) {
                    elmOffsetTop = elmOffsetTop - 70;
                }
            }

            //console.log( $( this ).attr( 'href' ) );              
            $( 'html:not(:animated), body:not(:animated)' ).animate({ scrollTop: elmOffsetTop }, 1100 );                                              

        });  

评论整个部分解决了我的问题，但是我失去了漂亮的滚动效果。
尝试了几个东西，但我不能让外部链接和滚动效果工作。

Commenting the whole section solves my problem, however i'm losing the nice scrolling effect. Tried a few things, but I can't get to make the external link AND the scrolling effect working.

任何想法？

推荐答案

您的问题不清楚您的问题是什么。
外部链接没有散列，所以 elmOffsetTop = Math.ceil（$（this.hash）.offset（）。top）; 会给出错误

Your question don't make clear what your problem is. External links don't have a hash so elmOffsetTop = Math.ceil( $( this.hash ).offset().top ); will give an error.

添加 if（！$（this）.attr（'href'）.match（/ ^＃/））return; code>开头的JavaScript，以防止此错误：

Add if(!$( this ).attr( 'href' ).match(/^#/)) return; at the start of your javascript to prevent this error:

$( '#navbar-spy' ).off( 'click' ).on( 'click', 'a', function( e ) {         

            if(!$( this ).attr( 'href' ).match(/^#/)) return;  
            e.preventDefault();

            var elmHash = $( this ).attr( 'href' );
            var elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
            var windowOffsetTop = Math.ceil( $(window).scrollTop() );

            if( elmOffsetTop != 0 ) {
                elmOffsetTop = elmOffsetTop - 70;
                if( windowOffsetTop == 0 ) {
                    elmOffsetTop = elmOffsetTop - 70;
                }
            }

            //console.log( $( this ).attr( 'href' ) );              
            $( 'html:not(:animated), body:not(:animated)' ).animate({ scrollTop: elmOffsetTop }, 1100 );                                              

        }); 

这篇关于BootStrap 3上的Navbar-spy不允许外部链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！