如何在没有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的情况下单击页面上的其他任何地方时关闭子菜单？

回答

相关问题