gpt4 book ai didi

javascript - 打开/关闭 div 切换并单击外部 div

转载 作者:行者123 更新时间:2023-12-01 03:57:53 24 4
gpt4 key购买 nike

这篇文章看起来像是重复的,但我认为不是。现在您可以单击显示框并显示红色框,如果要关闭此框,请单击外部。

问题:除了点击之外,再次点击Show box文本时如何关闭这个红色框。以及点击后如何更改 css 样式,例如单击后更改字体大小显示框

var myApplication = angular.module('myApp', []);
myApplication.directive('hideLogin', function($document){
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.bind('click', function(e) {
e.stopPropagation();
});
$document.bind('click', function() {
scope.$apply(attr.hideLogin);
})
}
}
});

myApplication.controller('hideContainer',function ($scope){
$scope.openLogin = function(){
$scope.userLogin = true;
};
$scope.hideLoginContainer = function(){
$scope.userLogin = false;
};
});
body {
position:relative;
}

.loginBox {
z-index:10;
background:red;
width:100px;
height:80px;
padding:10px;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<body ng-app="myApp" ng-controller="hideContainer">
<a href="#" ng-click="openLogin()" hide-login="hideLoginContainer()">Show box</a>
<div hide-login="hideLoginContainer()" class="loginBox" ng-show="userLogin" style="display:none;">
</div>
</body>

最佳答案

为了能够在单击时隐藏该框,请使用 $scope.userLogin = !$scope.userLogin 条件。

改变它的CSS样式,例如字体大小,使用ng-class。如果userLogin变量为true,它会添加fontSize类到其中,改变它的font-size

var myApplication = angular.module('myApp', []);
myApplication.directive('hideLogin', function($document) {
return {
restrict: 'A',
link: function(scope, elem, attr, ctrl) {
elem.bind('click', function(e) {
e.stopPropagation();
});
$document.bind('click', function() {
scope.$apply(attr.hideLogin);
})
}
}
});

myApplication.controller('hideContainer', function($scope) {
$scope.openLogin = function() {
$scope.userLogin = !$scope.userLogin;
};
$scope.hideLoginContainer = function() {
$scope.userLogin = false;
};
});
body {
position: relative;
}

.loginBox {
z-index: 10;
background: red;
width: 100px;
height: 80px;
padding: 10px;
position: absolute;
}

.fontSize {
font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>

<body ng-app="myApp" ng-controller="hideContainer">
<a href="#" ng-click="openLogin()" hide-login="hideLoginContainer()" ng-class="{'fontSize': userLogin}">Show box</a>
<div hide-login="hideLoginContainer()" class="loginBox" ng-show="userLogin" style="display:none;">
</div>
</body>

关于javascript - 打开/关闭 div 切换并单击外部 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42482394/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com