带有角度鼠标的引导日期选择器问题

我只有鼠标悬停下拉菜单/窗体。下拉菜单包含引导日期选择器。问题是当用户将鼠标悬停在日期选择器日历上时，底层菜单消失。

的期望的行为将是保持表示日历和底层菜单直到用户移动鼠标移出两者的对象

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.formMenu = false; 
 
    $('#dateInput').datepicker({ 
 
\t \t \t  format: "dd MM yyyy", 
 
\t \t \t  
 
\t \t \t  autoclose: true, 
 
\t \t \t  todayHighlight: true 
 
\t \t \t }); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <script data-require="[email protected]" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script> 
 
    <script data-require="[email protected]" 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

请提出的方法来实现相同

来源

2016-08-02 user2692032

我不确定我有没有将问题理解为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>

我知道它更像是黑客。观察DOM如果出现类datepicker的div也是一个意见。

来源

2016-08-02 14:34:17

我假设你的CSS看起来像这样

.nav:hover .menu { 
    display: block; 
}

所以添加相同的菜单本身

.menu:hover { 
    display: block; 
}

这样一来，当你停止徘徊的导航，你会仍然在做一些让菜单可见的东西。

来源

2016-08-02 14:39:06 amflare

带有角度鼠标的引导日期选择器问题

回答

相关问题