アンカーリンクをクリックするとブートストラップメニューが点滅します

Question

私はブートストラップ3メニューを持っています。私は要素にdata-toggle="collapse" data-target=".navbar-collapse"を追加して、モバイルビューでのクリック時にメニューを閉じるよう強制し、不動産を取り上げてメニュー上のテキストをブロックしないようにしました。それは美しく動作します。

しかし、デスクトップの表示では、メニュー項目をクリックすると、メニューが点滅してリロードされます。 blinkはサーバーとローカルコピーの両方で発生しますが、コードをcodepenに投げると発生しません。

携帯端末の折りたたみをターゲットにするように設定しようとしましたが、何か不足しています。

HTML：NAVの

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
     <a class="navbar-brand" href="#"><img alt="logo here" class="img-responsive logo" src="logo.png" /> </a></div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="topFixedNavbar1"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#welcome" data-toggle="collapse" data-target=".navbar-collapse">Welcome</a></li> 
      <li><a href="#info" data-toggle="collapse" data-target=".navbar-collapse">Information</a></li> 
      <li><a href="#housing" data-toggle="collapse" data-target=".navbar-collapse">Registration &amp; Housing</a></li> 
      <li><a href="#security" data-toggle="collapse" data-target=".navbar-collapse">Security &amp; Transportation</a></li> 
      <li><a href="#contact" data-toggle="collapse" data-target=".navbar-collapse">Contact</a></li> 
      <li class="dropdown"><a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Agendas<span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#" target="_blank"><i aria-hidden="true" class="fa fa-file-pdf-o">&nbsp;</i>Agenda 1</a></li> 
       <li><a href="#" target="_blank"><i aria-hidden="true" class="fa fa-file-pdf-o">&nbsp;</i>Agenda 2</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div> 
     <!-- /.navbar-collapse --> </div> 
    <!-- /.container-fluid --></nav> 

CSSのカスタマイズ：あなたが持つかもしれない助けや提案のための

.nav { 
    font-size: 2em; 
} 
@media (min-width: 960px) { 
    body { 
    padding-top: 135px; } 
.navbar { 
    min-height: 125px; 
} 
} 
.navbar-brand { 
    margin-left: 5px !important; 
    margin-top: -8px; 
} 
.navbar-default { 
    background-color: #fff; 
    border-bottom-color: #fff; 
} 
.navbar-nav { 
    margin: 40px 0 -15px; 
} 

/*Responsive font size on nav */ 
@media (max-width:1456px) { 
.nav { 
    font-size: 1.75em; 
} 
} 

@media (max-width:1337px) { 
.nav { 
    font-size: 1.5em; 
} 
} 

@media (max-width:1219px) { 
.nav { 
    font-size: 1.3em; 
} 
} 

@media (max-width:1124px) { 
.nav { 
    font-size: 1.2em; 
} 
} 

@media (max-width:1078px) { 
.nav { 
    font-size: 1.15em; 
} 
} 

@media (max-width:1053px) { 
.nav { 
    font-size: 1em; 
} 
} 

@media (max-width:981px) { 
.nav { 
    font-size: .95em; 
} 
} 

@media (max-width:959px) { 
.navbar-nav > li > a { 
    padding-top: 1px; 
    padding-bottom: 0; 
    line-height: 1; 
    font-size: 1.4em; 
} 
.navbar-nav { 
    padding-bottom: 18px; 
} 
/* 
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse { 
    min-height: 125px; 
}*/ 
.navbar-nav .open .dropdown-menu { 
    position: static; 
    float: none; 
    width: auto; 
    margin-top: 0; 
    background-color: transparent; 
    border: 0; 
    -webkit-box-shadow: none; 
    box-shadow: none; } 
    .logo { 
     height: 42px;} 
} 

@media (max-width: 962px) { 
.navbar-header { 
    float: none; 
} 
.navbar-left, .navbar-right { 
    float: none !important; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse { 
    border-top: 1px solid transparent; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); 
} 
.navbar-fixed-top { 
    top: 0; 
    border-width: 0 0 1px; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
    margin-top: 7.5px; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-nav>li>a { 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 
.collapse.in { 
    display: block !important; 
} 
} 

ありがとう！

Answer 1

ナビゲーションバー自体にネストされたリンクを使用して.navbar-collapseをターゲティングしています。クリックするたびに点滅が表示されます。あなたはナビゲーションバー内のリンクのいずれかをクリックすると

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

これは、ナビゲーションバーを閉じます。

は、あなたのリンクからすべての data-toggle="collapse" data-target=".navbar-collapse"の部品を外して、次のコードを追加します。注：これはブートストラップ3.xソリューションです。ブートストラップ2.xのために、代わりにリンクのリスト項目にクリックハンドラを追加します。

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