帶有角度鼠標懸停的Bootstrap日期選擇器問題
[英]Bootstrap date picker issue with angular mouse over
問題描述
我正在使用引導日期選擇器和Angular。
我只有一個鼠標懸停下拉菜單/窗體。 下拉菜單包含引導日期選擇器。 問題是當用戶將鼠標懸停在日期選擇器日歷上時，基礎菜單消失了。
所需的行為是一直顯示日歷和基礎菜單，直到用戶將鼠標移出兩個對象為止
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.formMenu = false; $('#dateInput').datepicker({ format: "dd MM yyyy", autoclose: true, todayHighlight: true }); });
<!DOCTYPE html> <html> <head> <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> <script data-require="angular.js@1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script> <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <div ng-mouseover="formMenu=true" ng-mouseleave="formMenu=false"> Dropdown </div> <div ng-show="formMenu" ng-mouseover="formMenu=true" ng-mouseleave="formMenu=false"> <label>This should not disappear on calendar hover</label> <input type="text" class="date-picker date-filter text-left" id="dateInput"> </div> </div> </body> </html>
示例： http ： //plnkr.co/edit/CvQSWLGntsbVIoJASgqy？p = preview
請提出實現相同目標的方法
2 個解決方案
解決方案1
1 已采納 2016-08-02 14:34:17
我不確定我是否已將問題理解為100％，但是日歷會打開onclick，因此如果您單擊輸入並在模糊時將其設置為false，則可以將屬性設置為true。
這樣的事情應該起作用。
div ng-show="formMenu || datepickerHover" ng-mouseover="formMenu=true" ng-mouseleave="formMenu=false">
<label>This should not disappear on calendar hover</label>
<input type="text" class="date-picker date-filter text-left" id="dateInput" ng-click="datepickerHover = true" ng-blur="datepickerHover = false">
</div>
我知道這更像是駭客。 如果出現帶有類datepicker的div來觀察DOM也將是一個意見。
解決方案2
0 2016-08-02 14:39:06
我假設您的CSS看起來像這樣
.nav:hover .menu {
display: block;
}
因此，將其添加到菜單本身
.menu:hover {
display: block;
}
這樣，當您停止在導航上懸停時，您仍會在做一些使菜單可見的操作。
角度日期選擇器問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.