2015-05-14 276 views
1

我已經使用Angular UI Bootstrap成功創建了一個響應菜單。問題是:Angular UI Bootstrap響應式菜單 - 點擊關閉菜單時關閉菜單?

當響應菜單打開時,只能通過重新點擊切換鍵來關閉它。點擊頁面上的任何其他位置,都會打開菜單,這對於我正在構建的網站來說是不理想的。

我在尋找這個功能:

任何地方點擊,除了菜單應關閉菜單,而不是將其切換。

如何實現這一目標?我嘗試在htmlbody元素上設置ng-click,並查看這是否可行,但事實並非如此。

+0

如果您在菜單上添加焦點丟失事件,該怎麼辦? ngBlur https://docs.angularjs.org/api/ng/directive/ngBlur –

回答

0

這實際上很簡單,只需要一點額外的CSS和一個額外的div即可解決。

Plunker Demo

該解決方案的機制是非常簡單的:添加一個額外的div來充當一個可點擊的背景下,當菜單展開導航欄標記。

CSS:

.backdrop { 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: transparent; 
    z-index: -1; 
} 

爲了確保背景覆蓋整個視,你會使用position: fixed並設置toprightbottomleft屬性0。然後,您需要確保背景不包含菜單,使您的菜單項無法點擊。爲此,您需要將其z-index設置爲-1。最後,爲了確保它是'可點擊的',你需要給它一個背景。將background-color設置爲transparent可確保它不會遮擋任何導航欄元素。

您需要做的下一件事是確保背景元素僅在展開菜單時才顯示,否則會覆蓋您的主體內容並使其無法與任何內容交互。很酷的是,ngClass指令使這一點變得簡單。您可以使用isCollapsed範圍變量通過將表達式設置爲isCollapsed === false來確定何時添加背景類。最後,添加ng-click屬性關閉菜單。因此,標記如下所示:

MARKUP:

<div ng-class="{backdrop: isCollapsed === false}" ng-click="isCollapsed = !isCollapsed"></div> 

當不添加背景類,股利 - 這沒有內容 - 自然會崩潰到的高度爲0 ,所以實際上不需要隱藏或顯示它。

請記住,背景div必須添加到管理菜單崩潰狀態的控制器處理的相同元素。如果它不能訪問isCollapsed範圍變量,它將不會顯示,並且ng-click事件將不起作用。

您可以通過創建一個簡單的自定義指令來輕鬆改善這一點,以便您不必在標記中添加div。只需將指令的範圍屬性設置爲true,以便指令可以訪問父級isCollapsed變量。

+0

謝謝!這很有魅力。 – Sharklazer