angularjs – 如何修改ui.bootstrap.dropdown以将鼠标悬停在放置按钮上？

我想使用ui.bootstrap.dropdown消息框以类似于ui.bootstrap.popover的方式显示文本信息(而不是链接).我想修改这个指令,因为它是我需要的99％,我不想添加popover需要的所有额外的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>

真正的下拉菜单都是在单击时向父元素添加一个开放类. Bootstrap CSS包含一个规则,使得.dropdown-menu类的子元素的显示属性设置为阻止：

.open>.dropdown-menu {
  display: block;
}

因此,要使鼠标悬停时显示菜单,您可以使用CSS中的hover伪类来执行相同操作.在这个例子中,我将规则附加到.btn-group父元素上：

.btn-group:hover>.dropdown-menu {
  display: block;
}

angularjs – 如何修改ui.bootstrap.dropdown以将鼠标悬停在放置按钮上？

相关文章