启动日期选择器问题,鼠标倾斜
Bootstrap date picker issue with angular mouse over
我正在使用引导日期选择器&有棱角的
我只有鼠标悬停时的下拉菜单/表单。下拉菜单包含引导程序日期选择器。问题是,当用户将鼠标悬停在日期选择器日历上时,基础菜单将消失。
所需的行为是继续显示日历和底层菜单,直到用户将鼠标移出两个对象
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。
这样的东西应该行得通。
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也是一种意见。
我假设你的CSS看起来像这个
.nav:hover .menu {
display: block;
}
因此,将相同内容添加到菜单本身
.menu:hover {
display: block;
}
这样,当你停止在导航上悬停时,你仍然会做一些让菜单可见的事情。
相关文章:
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 当鼠标悬停在文本中的单词上时显示警报
- JsFiddle上的鼠标事件不起作用
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 如何在鼠标悬停时在另一个图像上滑动图像.
- 鼠标悬停事件影响列表中所有行中的按钮,而不仅仅是特定按钮
- 将鼠标旋转限制为特定的度数
- 跟踪jqplot垂直折线图的鼠标位置
- node-webkit-从父窗口捕获iframe鼠标事件
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- Javascript-在视频中跟踪鼠标位置
- JQuery UI可拖动潜水与滚动棒到鼠标
- 如何在jquery中找到鼠标滚轮/触摸移动事件的走向
- 在鼠标悬停时展开列表
- jQuery悬停在没有鼠标悬停的情况下启动
- 鼠标输入在 YUI 的 chrome 中不起作用
- 鼠标悬停时如何居中放大背景图像
- JS中类似视差的元素倾斜
- 鼠标光标-用于wordpress网站
- 启动日期选择器问题,鼠标倾斜