javascript - 用angularjs 模拟的ul li下拉框怎么实现点击空白处消失?
PHP中文网
PHP中文网 2017-04-11 13:06:36
[JavaScript讨论组]

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

PHP中文网
PHP中文网

认证0级讲师

全部回复(1)
高洛峰

我使用的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>' +
                  '<p class="menu" ng-class="{show: displayMenu}" ng-click="clickInner($event)">' +
                       '<ul>' +
                            '<li>菜单一</li>' +
                            '<li>菜单二</li>' +
                            '<li>菜单三</li>' +
                      '</ul>' +
                  '</p>'
    };
});

在线例子: jsfiddle

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号