奇怪的 Angular/Bootstrap 下拉行为

Question

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

我对 Angular Directives for Bootstrap 中的 ui.boostrap.dropdown 做了一些修改（参见 Dropdown）。一切正常，除了在多选模式下单击后出现灰色条（看起来:hover css 在单击后保持活动状态）。

当我关闭然后重新打开时，突出显示消失，好像悬停事件已经完成。

流程：

1. 打开下拉菜单
2. 单击多选
3. 移动鼠标，多选保持高亮状态，就好像“:focus”标签没有被删除一样。

视觉上： 在此图像中鼠标超过 345，多选应该不被突出显示。

用于下拉菜单的 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();
        }
    }
};

链接到Plunker。

我没有运气追踪到这一点，我的直觉是问题出在 CSS 中，但它是标准的引导 CSS。任何帮助将不胜感激。

Answer 1

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

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

无需进行自定义引导构建，只需在焦点后添加悬停以保持灰色突出显示：

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