帶有角度鼠標的引導日期選擇器問題

我只有鼠標懸停下拉菜單/窗體。下拉菜單包含引導日期選擇器。問題是當用戶將鼠標懸停在日期選擇器日曆上時，底層菜單消失。

的期望的行爲將是保持表示日曆和底層菜單直到用戶移動鼠標移出兩者的對象

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

帶有角度鼠標的引導日期選擇器問題

回答

相關問題