我已經使用Angular UI Bootstrap成功創建了一個響應菜單。問題是:Angular UI Bootstrap響應式菜單 - 點擊關閉菜單時關閉菜單?
當響應菜單打開時,只能通過重新點擊切換鍵來關閉它。點擊頁面上的任何其他位置,都會打開菜單,這對於我正在構建的網站來說是不理想的。
我在尋找這個功能:
任何地方點擊,除了菜單應關閉菜單,而不是將其切換。
如何實現這一目標?我嘗試在html
或body
元素上設置ng-click
,並查看這是否可行,但事實並非如此。
我已經使用Angular UI Bootstrap成功創建了一個響應菜單。問題是:Angular UI Bootstrap響應式菜單 - 點擊關閉菜單時關閉菜單?
當響應菜單打開時,只能通過重新點擊切換鍵來關閉它。點擊頁面上的任何其他位置,都會打開菜單,這對於我正在構建的網站來說是不理想的。
我在尋找這個功能:
任何地方點擊,除了菜單應關閉菜單,而不是將其切換。
如何實現這一目標?我嘗試在html
或body
元素上設置ng-click
,並查看這是否可行,但事實並非如此。
這實際上很簡單,只需要一點額外的CSS和一個額外的div即可解決。
該解決方案的機制是非常簡單的:添加一個額外的div來充當一個可點擊的背景下,當菜單展開導航欄標記。
CSS:
.backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: transparent;
z-index: -1;
}
爲了確保背景覆蓋整個視,你會使用position: fixed
並設置top
,right
,bottom
和left
屬性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變量。
謝謝!這很有魅力。 – Sharklazer
如果您在菜單上添加焦點丟失事件,該怎麼辦? ngBlur https://docs.angularjs.org/api/ng/directive/ngBlur –