Question

点击某个项目时，我正在显示下拉菜单。当我再次点击该项目时它隐藏了。如果我点击窗口上的任何地方，我试图隐藏下拉菜单。这是我的代码。

<div  ng-click="showDropDown()" class="dropdown">dropDown
                    <div id="myDropdown" class="dropdown-content">
                        <label ng-click="sentToHome()">Home</label>
                        <label  ng-click="sentToContacts()">Contacts</label>
                    </div>
            </div>

这是我的控制器：

   $scope.showDropDown = function(){

       document.getElementById("myDropdown").classList.toggle("show"); 
    };

如果点击页面中的任意位置，如何关闭下拉列表？

Answer 1

如果您希望在单击选择框外部时关闭下拉列表，则可以使用另一个自定义指令，该指令在窗口上侦听单击事件。这将播出您可以收听的新活动：

dropdown:close

这意味着您可以通过添加侦听器$scope.$on('dropdown:close', function (event, data) { $scope.$apply(function() { if($scope.open) { //only close when it is open $scope.open = !$scope.open; } }); });事件来修改原始操作：

$(window).on('scroll', function() {
  $('#someID').addClass('red');
});

$(window).scroll(function() {
  clearTimeout($.data(this, 'scrollTimer'));
  $.data(this, 'scrollTimer', setTimeout(function() {
    $('#someID').removeClass('red');
  }, 250));
});

当我们点击angularjs中的菜单外，如何关闭下拉列表

1 个答案: