个人中心
gpt4 book ai didi

angularjs - 如何修改 ui.bootstrap.dropdown 以响应鼠标悬停在下拉按钮上？

转载 作者：行者123 更新时间：2023-12-02 21:49:06 24 4
gpt4 key购买 nike

我想使用 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/

24 4 0
文章推荐： facebook - 我有一个有效的 Facebook access_token，并授予了电子邮件权限，但用户图表中仍然没有电子邮件信息
文章推荐： javascript - 替换数组中特定位置的元素而不改变它
文章推荐： angularjs:app.config 中的条件路由
文章推荐： doctrine - Doctrine 2.1 @Column 注释中 "options"的语法是什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com