如何在Angular應用程序中點擊任何鏈接時隱藏Bootstrap navbar下拉菜單？

在窄屏幕上，Bootstrap導航欄顯示爲一個覆蓋頁面內容的按鈕面板。有很多問題和答案可以解決當面板被點擊時隱藏面板的問題 - 這不是我想要解決的問題。如何在Angular應用程序中點擊任何鏈接時隱藏Bootstrap navbar下拉菜單？

這個問題是如何讓頁面正文中的鏈接點擊時隱藏該面板和這些鏈接是由AngularJs模板生成的。有一個簡單的解決方案嗎？

這裏是主頁成角插入內容的相關內容：

<html lang="en" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="eepApp" 
     ng-controller="AppController"> 
<head> 
... 
</head> 
<body> 

<!-- Small screen menu --> 
<div class="navbar navbar-default navbar-fixed-top visible-xs" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
        data-target="#navbar-collapse-id"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <ul class="nav navbar-nav navbar-left pull-left"> 
       ... 
      </div> 
     </div> 
     <div class="collapse navbar-collapse" id="navbar-collapse-id"> 
      <ul class="nav navbar-nav navbar-right"> 
       ... 
      </ul> 
     </div> 
    </div> 
</div> 

<!-- Bigger screen menu --> 
<div class="navbar navbar-default navbar-fixed-top hidden-xs" role="navigation"> 
    ... 
</div> 

<!-- Page content inserted by Angular here --> 
<div id="partials" ng-view="partials"></div> 

<script src="various JavaScript inculding Angular and jQuery"/> 

<script> 

// Hide navbar menu when item clicked 
$(document).on('click', '.navbar-collapse.in', function(e) { 
    if ($(e.target).is('a') || $(e.target).parent().is('a')) { 
     $(this).collapse('hide'); 
    } 
}); 

</script> 

</body> 
</html>

來源

2014-12-02 Keith C

你能更具體嗎？提供一些代碼來演示你有什麼。 – ZimSystem 2014-12-02 12:26:33

@Skelly我已經添加了一個主頁的切碎版本。問題是如何獲取Angular插入的內容，以便在單擊內容中的任何鏈接時導致Bootstrap菜單關閉。已經在頁面上的on（「click」）JavaScript僅在單擊菜單上的鏈接時關閉菜單。 – 2014-12-02 13:30:49

我已經走了這個方法，即當頁面的變化，保持開放的導航欄菜單中的類（稱爲「「）被使用jQuery移除：

$scope.$on('$routeChangeStart', function() { 
    // Close navbar menu (if open) by removing the class that makes it visible 
    $('#navbar-collapse-id').removeClass('in'); 
});

這被添加到整個應用程序控制器還處理例如登錄和註銷。

來源

2014-12-04 17:20:15

如何在Angular應用程序中點擊任何鏈接時隱藏Bootstrap navbar下拉菜單？

回答

相關問題