奇怪的 Angular/Bootstrap 下拉行为

Question

我的应用程序需要一系列下拉菜单。该功能要求我能够在正常下拉行为和多 select 行为之间切换。

我对 Bootstrap 的 Angular 指令中的 ui.boostrap.dropdown 进行了细微修改（参见 Dropdown）。一切正常，除了在 Multiselect 模式下单击后出现灰色条（看起来 :hover css 在单击后保持活动状态）。

当我关闭然后重新打开时，突出显示消失了，就好像悬停事件以某种方式完成了。

进程：

打开下拉菜单
单击多个select
移动鼠标，Multiselect 保持突出显示，就好像“:focus”标签没有被删除一样。

视觉上： 此图中鼠标超过 345，Multiselect 应该 而不是 突出显示。

Angular HTML 用于下拉列表：

<div ng-controller="DropdownCompanyController as vm">
    <div class="btn-group u-front_dropdown-wide" dropdown is-open="vm.isopen">
        <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>
            {{ vm.selected }} <span class="caret"></span>
        </button>

        <ul class="dropdown-menu" role="menu" ng-click="vm.checkMultiSelect($event)">
            <li ng-repeat="company in vm.companies"
                ng-class="{ selected : company.selected }">
                <a href="#" ng-click="vm.event.select(company)">{{ company.name }}</a>
            </li>

            <li class="divider"></li>
            <li class="ng-scope" ng-class="{selected : vm.multi.select }">
                <a href="#"
                    ng-click="vm.event.multiselect()"
                    ng-class="{ multi: vm.multi.select }">Multiselect</a>
                <button
                    ng-hide="!vm.multi.select"
                    ng-class="{ multi_button: vm.multi.select }"
                    ng-click="vm.event.close_dropdown($event)">Close</button>
            </li>
        </ul>
    </div>
</div>

这是处理元素点击的事件：

vm.event = {};
vm.event.select = function(company) {
    if (!vm.multi.select) {
        clearCompanies(false);
        company.selected = true;
        vm.selected = company.name;
        vm.isopen = false;
    } else {
        if (company.name !== vm.defaultCompany) {
            company.selected = !company.selected;
            vm.selected = vm.multi.title + countCompanies();
        }
    }
};

Link 到 Plunker.

我没有找到这个问题，我的直觉是问题出在 CSS，但它是标准的 bootstrap CSS。如有任何帮助，我们将不胜感激。

Answer 1

如果您只是不想让任何项目突出显示，那么在您自己的自定义 app.css 文件中用白色覆盖焦点状态：

.dropdown-menu > li > a:focus {
  background-color: white;
}

无需进行自定义 bootstrap 构建，只需将鼠标悬停在焦点之后以保持灰色突出显示即可：

 .dropdown-menu > li > a:hover {
      background-color: lightgray;
    }

奇怪的 Angular/Bootstrap 下拉行为

Odd Angular/Bootstrap Dropdown Behavior

javascript

jquery

angularjs

angular-ui-bootstrap