如何在頁面中的任何位置點擊時關閉下拉菜單？

嗨，我正在開發SPA的angularjs。成功的用戶登錄後，我將在右上角設置一個下拉菜單。每當我們點擊下拉菜單時就會展開。每當用戶點擊頁面中的任何位置時，我想關閉該下拉菜單。如何在頁面中的任何位置點擊時關閉下拉菜單？

以下是我的代碼來生成下拉菜單。

var id = document.getElementById('ProfileDropdown'); 
     id.innerHTML = $scope.ProfileDropdown = ' <div data-drop-down>' + ' <ul>' + 
       '<li ><a ui-sref="Dashboard.Userprofile">User Profile</a></li>' + 
      '<li><a ui-sref="Dashboard.changepassword">Change Password</a></li>' + 
       '<li><a ui-sref="Dashboard.LeaseListings">Lease Request</a></li>' + 
       '<li><a ui-sref="#">Service Request</a></li>' + 
        '<li><a ui-sref="Dashboard.NewServiceRequest">New Service Request</a></li>' + 
      ' <li ng-click="logout()">Logout</li>' + 
     '</ul>' + '</div>'; 
     $compile(id)($scope);

我在尋找什麼應該爲了當用戶在頁面點擊其他地方做接近的下拉掙扎？

這是SPA，所以我有一個HTML頁面。在其餘我使用ui路由動態追加內容。

我可以得到一些幫助解決這個問題嗎？

任何幫助，將不勝感激！

謝謝。

來源

2017-07-25 Niranjan Godbole

試試這個

$document.click((e) => { 
    let element = angular.element('.enterElementClassName') 
    if (!element.is(e.target) && element.has(e.target).length === 0)  { 
     // close popup condition 
    } 
    });

來源

2017-07-25 06:30:02 fahad

謝謝法赫德。我可以知道上面代碼中的enterElementClassName是什麼嗎？此外，我應該在app.js上面寫代碼嗎？ –

很棒（'#ProfileDropdown'） – fahad

謝謝fahad。現在，每當我點擊頁面事件的任何地方正在發射。我可以知道如何關閉上面的dropodwn嗎？ –

對於角做，Remove/Add Class in Angular 您可以使用$ scope.class方法做刪除類的下拉到隱藏/刪除它來自網頁。

在使用Javascript/JQuery的

可以有關閉下拉，在一些假設的基礎上幾種解決方案：假設你有一些類元素的描述下拉菜單中，防爆：

var id = document.getElementById('ProfileDropdown'); 
     id.innerHTML = $scope.ProfileDropdown = ' <div data-drop-down class="dropdown_menu">' + ' <ul>' + 
       '<li ><a ui-sref="Dashboard.Userprofile">User Profile</a></li>' + 
      '<li><a ui-sref="Dashboard.changepassword">Change Password</a></li>' + 
       '<li><a ui-sref="Dashboard.LeaseListings">Lease Request</a></li>' + 
       '<li><a ui-sref="#">Service Request</a></li>' + 
        '<li><a ui-sref="Dashboard.NewServiceRequest">New Service Request</a></li>' + 
      ' <li ng-click="logout()">Logout</li>' + 
     '</ul>' + '</div>'; 
     $compile(id)($scope);

現在要關閉下拉可以觸發一個針對您的HTML標記的主要包裝的事件並刪除附加在div中的類。要刪除/關閉的元/類是不同的背景和超出範圍的這個問題，對於您可以參考This Link Here

希望幫助，

感謝&問候

Shohil Sethia

來源

2017-07-25 06:37:37

謝謝Shohil。我正在尋找純角碼。 –

喜@NiranjanGodbole 檢查答案現在，已經更新了它的角度，你可以參考給定的鏈接，你可以在角上拆下類以及任何CSS添加到它像** **淡出或他人等希望它有幫助，關心 –

如何在頁面中的任何位置點擊時關閉下拉菜單？

回答

相關問題