読者です 読者をやめる 読者になる 読者になる

Debuginfo

思考とアウトプット

AngularJS+Bootstrap3でモバイルview時にnavbarが閉じない(collapseしない)現象を解決する

どうやらSingle page applicationのときに起きる現象のようですが、Bootstrap3を使っていてwindowサイズを小さくするとメニューがハンバーガーになります。ここでリンクをクリックするとリンク先でハンバーガーのnavbarが閉じなくなります。解決方法は、下記コードをどこかに組み込む。

 $(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});

私の場合は、Header viewを作っているのでその下に<script>タグで書きました。

 # views/header.html
 <header id="myapp_header" class="navbar navbar-inverse normal" role="banner">
<div class="container">
  <div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a ng-show="loginStatus.loggedIn" href="/#/main" class="navbar-brand"><img src="images/myapp_logo.png" height="50px" style=""></img></a>
    <a ng-show="!loginStatus.loggedIn" href="/" class="navbar-brand"><img src="images/myapp_logo.png" height="50px" style=""></img></a>
  </div>
  <div class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
  <ul class="nav navbar-nav navbar-right">
    <li ng-show="loginStatus.loggedIn"><a href="/#/main">Home</a></li>
    <li ng-show="!loginStatus.loggedIn"><a href="/">Home</a></li>
    <li ng-show="loginStatus.loggedIn"><a href="/auth/logout" class="signup" >Logout</a></li>
    <li ng-show="!loginStatus.loggedIn"><a href="/auth/instagram/login" class="signup" >Login</a></li>
  </ul>
  <div/>
</div>
<script>
$(document).on('click','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).collapse('hide');
    }
});
</script>
</header>

参考