試過了好多辦法都沒有實現，求助
用angularjs 模擬的ul li下拉框怎么實現點擊空白處消失？
尚方寶劍之說
2018-09-11 17:06:41
1 回答
森欄
TA貢獻1810條經驗 獲得超5個贊
我使用的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
添加回答
舉報
0/150
提交
取消