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>
