Question

当我在div之外点击时想要关闭div时，这是jquery的事情。

 $(document).on("click", function (e) {
        if (e.target.id != "user-login-top" && !$(e.target).closest("#user-login-wrapper").length) {
            $("#user-login-wrapper").removeClass("wide");
        }
    });

棱角分明的是什么？ Fiddle

非常感谢

Answer 1

通过实施自定义指令，在顶部菜单外单击将隐藏右侧边栏。

看看这个：http://jsfiddle.net/zqdmny41/20/

app.controller('mainCtrl', function ($scope) {
    // Add a function to hide the right sidebar.
    $scope.hideSideMenu = function() {
        $scope.bodyCon = false;
        $scope.noneStyle = false;
    }
    ...
})
.directive("outsideClick", ['$document', function( $document){
return {
    link: function( $scope, $element, $attributes ){
        var scopeExpression = $attributes.outsideClick,
            onDocumentClick = function(event){
                if(event.target.id != 'rightMenu' && event.target.id != 'toggle-menu') {
                    $scope.$apply(scopeExpression);
                }
            };

        $document.on("click", onDocumentClick);

        $element.on('$destroy', function() {
            $document.off("click", onDocumentClick);
        });
    }
}
}]);

在您的HTML中：

<aside class="rightbar" id="rightMenu" ng-class="{'noneStyle' : noneStyle}" outside-click="hideSideMenu()">

效果是：

点击顶部图标将切换右侧边栏
点击右侧边栏本身不会触发任何内容，
并点击其他地方将隐藏右侧边栏。

基本逻辑是：

创建名为＆＃34; outsideClick＆＃34;的自定义指令并通过添加属性outside-click="hideSideMenu()"
将函数名称hideSideMenu传递给指令，该指令将click事件添加到文档中。
当用户点击该文档时，如果目标ID不是rightMenu而不是toggle-menu，则会隐藏右侧边栏。

参考：http://vadimpopa.com/onblur-like-for-a-div-in-angularjs-to-close-a-popup/

使用Angular在div外部单击时关闭div

1 个答案: