2

ナビゲーション バー (ブログなど) の最後に外部リンクを追加しようとしており、他の .html ファイルにリンクするドロップダウンを追加しようとしていますが、うまくいきません。

これがコードです。これらの非 #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 は、少し異なる問題を扱う別の投稿でヒント (多分?) を提供しましたが、これを追加して問題を解決する方法がわかりません。

リンクはこちら : Bootstrap のスクロール スパイ機能にスムーズ スクロールを追加する方法

貴重な時間をありがとう！

- アップデート -

問題の原因がどこにあるのか、custom.js ファイル内の次のコードが見つかりました。

$( '#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 );                                              

        });

セクション全体にコメントすると問題は解決しますが、スクロール効果が失われています。いくつか試してみましたが、外部リンクとスクロール効果を機能させることができません。

何か案は ？

4

2 に答える 2

1

あなたの質問は、あなたの問題が何であるかを明確にしていません。外部リンクにはハッシュがないelmOffsetTop = Math.ceil( $( this.hash ).offset().top );ため、エラーが発生します。

このエラーを防ぐために、JavaScript の先頭に追加if(!$( this ).attr( 'href' ).match(/^#/)) return;します。

$( '#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 );                                              

        });
于 2013-09-18T08:53:40.757 に答える