打開/關閉div切換並在div外部單擊
[英]Open/close div toggle and click outside div
問題描述
這篇文章看起來像重復，但我認為不是。 現在，您可以單擊Show box並顯示紅色框，如果要關閉此框，請單擊外部。
問題：再次單擊時如何關閉此紅色框Show box文本，但單擊外部除外。 以及如何在單擊后更改CSS樣式，例如，單擊后更改字體大小Show box
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>
3 個解決方案
解決方案1
1 2017-02-27 09:52:43
可以使用一個$scope變量，而不是使用多個$scope來實現類似的目的，而要看一下代碼片段。
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.userLogin = true; $scope.hideLoginContainer = function(){ $scope.userLogin = true; }; });
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="userLogin = !userLogin" hide-login="hideLoginContainer()">Show box</a> <div hide-login="hideLoginContainer()" class="loginBox" ng-show="!userLogin" style="display:none;"> </div> </body>
解決方案2
1 已采納 2017-02-27 09:55:10
為了能夠隱藏單擊框，請使用$scope.userLogin = !$scope.userLogin條件。
要更改其css樣式，例如font-size ，請使用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>
解決方案3
0 2017-02-27 09:51:03
您可以將openLogin()重命名為toggleLogin()並相應地將函數更改為
$scope.toggleLogin = function(){
$scope.userLogin != $scope.userLogin;
};
單擊鏈接時，將切換該框。
對於CSS部分，如果userLogin ==true ，請使用ng-class有條件地對元素進行類簽名
<div ng-class="{'myConditionalClass':userLogin }"></div>
鼠標離開后保持懸停div打開，然后在div窗口或關閉按鈕之外單擊以將其關閉
[英]Keep hover div open after mouseleave and close it with click outside the div window or close button
div啟用復選框，但在div之外時檢測到單擊以關閉
[英]Div toggle on checkbox but detect click when outside of the div to toggle off
當我單擊打開和關閉div按鈕時，我想通過JavaScript切換div
[英]I want to toggle div by JavaScript when i click on the button open and close the div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.