我正在使用 Bootstrap 日期选择器和 Angular。
我仅在鼠标悬停时有一个下拉菜单/表单。下拉菜单包含 Bootstrap 日期选择器。问题是当用户将鼠标悬停在日期选择器日历上时，底层菜单消失。
所需的行为是继续显示日历和底层菜单，直到用户将鼠标移出这两个对象
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
请建议实现相同目标的方法
最佳答案
我不确定我是否 100% 理解了这个问题，但是日历会在单击时打开，因此如果您单击输入并将其设置为 false，则可以将属性设置为 true 并在模糊时将其设置为 false。
像这样的东西应该有效。
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 也是一种观点。
关于javascript - Bootstrap 日期选择器问题与 Angular 鼠标悬停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38722267/