javascript - 用angularjs 模拟的ul li下拉框怎么实现点击空白处消失？

问题描述

问 题

试过了好多办法都没有实现，求助

解决方案

我使用的trick是，利用冒泡达到点击菜单外部关闭菜单的目的：

var demo = angular.module('demo', []);

demo.directive('menu', function(){

    return {
        restrict: 'E',
        scope: {},
        link: function(scope, element, attrs) {
            scope.displayMenu = false;
            
            scope.showMenu = function(e) {
                scope.displayMenu = true;
                e.stopPropagation();
            };
            
            scope.clickInner = function(e) {
                e.stopPropagation();
            };
            
            document.addEventListener('click', function(){
                scope.displayMenu = false;
                scope.$apply();
            }, false);
            
        },
        template: '<button class="showBtn" ng-click="showMenu($event)">显示菜单</button>' +
                  '<div class="menu" ng-class="{show: displayMenu}" ng-click="clickInner($event)">' +
                       '<ul>' +
                            '<li>菜单一</li>' +
                            '<li>菜单二</li>' +
                            '<li>菜单三</li>' +
                      '</ul>' +
                  '</div>'
    };
});

在线例子: jsfiddle

这篇关于javascript - 用angularjs 模拟的ul li下拉框怎么实现点击空白处消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！