https://plnkr.co/edit/z2uW4O6D1uLFnsoLjWeb?p=preview
当鼠标悬停在 block 上时,选择必须显示。当您打开选择并指向其中一个选项时,选项应立即消失。
这在 chrome 中可以正常工作,但在 Firefox 中却不行。知道如何在 FF 中解决这个问题吗?
var app = angular.module('angularjs-starter', []);
app.controller('SpicyCtrl', function($scope) {
$scope.spice = 'very';
});
.box {
width: 250px;
height: 250px;
background: #ccc;
}
<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<title>Controller example Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
</head>
<body>
<h1>Welcome</h1>
<div>Controller example</div>
<div ng-controller="SpicyCtrl">
<div class="box" ng-mouseover="active_dropdown = true"
ng-mouseleave="active_dropdown = false">
<div ng-show="active_dropdown">
<select name="" id="">
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
<option>lorem test test</option>
</select>
</div>
</div>
</div>
</body>
</html>
最佳答案
问题出在 Firefox 中,当您选择下拉菜单时,它会考虑 mouseleave for class="box"并设置,
active_dropdown = false
你可以做的是代替 ng-mouseleave="active_dropdown = false"你可以给它一个函数 ng-mouseleave="test($event)".
现在在你的 app.js 中添加函数
$scope.test = function (event) {
if (event.target.tagName !== 'SELECT') { // Update the code accordingly
$scope.active_dropdown = false;
}
}
关于javascript - 如何修复 Firefox c select 上的错误?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48527299/