我想使用 ui.bootstrap.dropdown 消息框以与 ui.bootstrap.popover 类似的方式显示文本信息(不是链接)。我想修改这个指令，因为它完成了我需要的 99%，并且我不想添加弹出窗口所需的所有额外 JS。
换句话说，我希望当用户将鼠标悬停在向下箭头上时显示“下拉列表区域”，然后在将鼠标移离向下箭头时消失。
有没有一种方法可以向 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);
});
}
};
最佳答案
这只需要一点额外的 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 类的子元素将其显示属性设置为阻止:
.open>.dropdown-menu {
display: block;
}
因此，要使菜单在悬停时显示，可以使用 CSS 中的 :hover 伪类来执行相同的操作。在此示例中，我将规则附加到 .btn-group 父元素，如下所示:
.btn-group:hover>.dropdown-menu {
display: block;
}
关于angularjs - 如何修改 ui.bootstrap.dropdown 以响应鼠标悬停在下拉按钮上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28364881/