Question

我有一个菜单项，点击时会弹出一个子菜单。如果我再次点击它就会关闭。那部分工作正常。我的问题是，如果不使用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;
};

Answer 1

执行此操作的最简单方法是在显示对话框时向主体附加单击侦听器，然后在关闭对话框时删除该侦听器（通过选择对话框上的项目或选择屏幕上的其他位置/身体）。这是一些伪代码。

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非常合作！

Answer 2

最简单的解决方法是利用事件冒泡效果。由于事件冒泡到dom树的顶部，这意味着由子dom元素触发的任何click事件将继续在所有父节点上触发，直到它到达文档的顶部“如果它在冒泡到顶部时没有被抑制” 。所以基本上你想要做的是，如果任何点击到达body标签，它会自动关闭所有子菜单！但这会杀死刚刚开放的子菜单。为了避免这种情况，您只需停止子菜单本身上的click事件冒泡！

<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

Answer 3

这是一个简单的小提琴，可以根据您的需要进行调整：jsfiddle.net/2ZzZB/1516 /

如何在没有jQuery的情况下单击页面上的任何其他位置时关闭子菜单？

3 个答案: