如何修改ui.bootstrap.dropdown以响应鼠标悬停在拖放按钮上？
我想使用与ui.bootstrap.popover类似的方式使用ui.bootstrap.dropdown消息框来显示文本信息(而不是链接)。我想修改这个指令，因为它做了我需要的99%，我不想添加所有额外的JS，popover需要。
换句话说，我希望当用户将鼠标悬停在向下箭头上时，显示“下拉列表区域”，然后当他们将鼠标从向下箭头移开时，该区域会消失。
有没有办法向ui.bootstrap.dropdown添加一个选项，以便将鼠标悬停在箭头上可以显示和隐藏下拉框。我不想在这个框里放任何链接。
我希望有人有一些想法，可以帮助我建议如何更改ui.bootstrap.dropdown附带的这个指令：
.directive('dropdownToggle', function () {
return {
require: '?^dropdown',
link: function (scope, element, attrs, dropdownCtrl) {
if (!dropdownCtrl) {
return;
}
dropdownCtrl.toggleElement = element;
var toggleDropdown = function (event) {
event.preventDefault();
if (!element.hasClass('disabled') && !attrs.disabled) {
scope.$apply(function () {
dropdownCtrl.toggle();
});
}
};
element.bind('click', toggleDropdown);
// WAI-ARIA
element.attr({ 'aria-haspopup': true, 'aria-expanded': false });
scope.$watch(dropdownCtrl.isOpen, function (isOpen) {
element.attr('aria-expanded', !!isOpen);
});
scope.$on('$destroy', function () {
element.unbind('click', toggleDropdown);
});
}
};回答 3
Stack Overflow用户
发布于 2015-02-10 05:49:43
这只需要一点额外的CSS就可以完成。您没有在问题中提供您的标记，所以我只使用文档中的按钮组示例。如果您提供了特定的标记，我将相应地调整此答案。
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css";
.btn-group:hover>.dropdown-menu {
display: block;
}<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
<!-- Split button -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</div>
</div>
<script>
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
});
</script>
</body>
</html>
实际上，下拉菜单所做的全部工作就是在单击父元素时向其添加一个open类。Bootstrap CSS包含一条规则，该规则使具有.dropdown-menu类的子元素的display属性设置为block：
.open>.dropdown-menu {
display: block;
}因此，若要使菜单在悬停时显示，可以使用CSS中的: hover伪类执行相同的操作。在本例中，我将规则附加到.btn-group父元素：
.btn-group:hover>.dropdown-menu {
display: block;
}Stack Overflow用户
发布于 2016-07-19 03:36:39
这是我的简单但低保真的解决方案。将Mouseover和mouseleave放在顶层列表项目上是我最大的灵感，所以他们对组采取行动：
<li uib-dropdown is-open="status.isopen" ng-mouseover="status.isopen = true" ng-mouseleave="status.isopen = false">
<a ui-sref="abc">ABC</a>
<ul uib-dropdown-menu role="menu">
<li role="menuitem"><a ui-sref="def">DEF</a></li>
</ul>
</li>Stack Overflow用户
发布于 2016-02-06 04:03:55
只需在is-open中添加一个范围变量，然后添加属性ng-mouseover="status.isopen = true“
<div class="btn-group" uib-dropdown ng-mouseover="status.isopen = true" is-open="status.isopen">或者，您可以使用ng-mouseenter="status.isopen = true“和ng-mouseleave="status.isopen = false”，但是这有时会导致下拉在您移动到下拉时关闭。
https://stackoverflow.com/questions/28364881
复制相似问题