如何在沒有jQuery的情況下單擊頁面上的其他任何地方時關閉子菜單？

我有一個菜單項，當點擊時彈出一個子菜單。如果我再次點擊它，它會關閉。這部分工作正常。我的問題是，如果不使用jQuery，當我單擊頁面上的任何其他位置時，如何才能使此子菜單關閉？如何在沒有jQuery的情況下單擊頁面上的其他任何地方時關閉子菜單？

下面是用戶點擊什麼的：

<div class="main-nav" ng-click="showDialog()" ng-hide="highlightItem()"> 
    <a class="left" >Foo</a> 
</div> 
<div class="main-nav focus" ng-click="hideDialog()" ng-show="highlightItem()"> 
    <a class="left" >Foo</a> 
</div>

這裏是孩子的菜單：

<div id="navDialog" class="main-nav-dialog" ng-show="dialog" ng-click="hideDialog()"> 
    <div> 
     <a ui-sref="item1" class="left border-bottom">Item 1</a> 
    </div> 
    <div> 
     <a ui-sref="item2" class="left border-bottom">Item 2</a> 
    </div> 
    <div> 
     <a ui-sref="item3" class="left border-bottom"></i>Item 3</a> 
    </div> 
    <div> 
     <a ui-sref="item4" class="left">Item 4</a> 
    </div> 
</div>

這裏是什麼在我的控制器：

var show = false; 
$scope.showDialog = function() { 
    if (show === false) { 
     show = true; 
     $scope.dialog = true; 
     return show; 
    } 
}; 
$scope.hideDialog = function() { 
    if (show === true) { 
     show = false; 
     $scope.dialog = false 
     return show; 
    } 
}; 
$scope.highlightItem = function() { 
    return show; 
};

來源

2014-09-02 gjanden

你可能想做一個指令，然後使用angular.element來獲得父（'body'）。bind（'click'，doStuff）。不要忘記範圍$ on（'$ destroy'，unBindMyListeners） – 2014-09-02 15:01:55

最簡單方法來做到這一點是當你顯示你的對話框時，附加到身體的點擊監聽器，然後刪除該監聽器對話框關閉（通過選擇對話框中的項目或選擇屏幕上/本體的其他位置）。這是一些僞代碼。

var handleDialogClose = function() { 
    //remove event listener handleDialogClose from body tag 
    //Close dialog 
} 

var handleDialogItemClicked = function() { 
    handleDialogClose(); 
    //Do some other work 
} 

var handleDialogOpen = function() { 
    // add event listener handleDialogClose to body tag 
    // Show dialog 
}

此外，這將是更容易做與jQuery，所以你應該考慮在你的項目中使用它。 AngularJS和jQuery一起工作非常棒！

來源

2014-09-02 15:10:29 catalyst294

最簡單的修復方法是利用事件冒泡效果。由於事件冒泡到dom樹的頂部，意味着由子dom元素觸發的任何點擊事件將繼續在所有父節點上觸發，直到它到達文檔的頂部「如果冒泡到頂部時它沒有被抑制」。所以基本上你想做的是如果任何點擊到達身體標籤，它會自動關閉所有的子菜單！但那會殺死剛剛打開的子菜單。爲了避免這種情況，您只需停止子菜單上的點擊事件冒泡！

<head> 
    <script type="text/javascript"> 
     function hideAll() { 
      $("child-one").style.display = "none"; 
      $("child-two").style.display = "none"; 
     } 

     function show(event, theDiv) { 
      theDiv.style.display = "block"; 
      event.stopPropagation(); 
     } 
    </script> 
</head> 
<body onclick="hideAll();"> 
    <div id="child-one" onclick="show(event,this);"> 
     first child 
    </div> 
    <div id="child-two" onclick="show(event,this);"> 
     second child 
    </div> 
</body>

你可以閱讀更多有關事件冒泡效應在這裏： http://javascript.info/tutorial/bubbling-and-capturing

和有關stopPropagation方法在這裏： https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

來源

2014-09-02 15:20:44

下面是一個簡單的小提琴，可以調整，以滿足您的需求： jsfiddle.net/2ZzZB/1516/

來源

2014-09-02 15:27:13 ABOS

如何在沒有jQuery的情況下單擊頁面上的其他任何地方時關閉子菜單？

回答

相關問題