Question

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

我对Angst Directives for Bootstrap中的ui.boostrap.dropdown做了一些修改（参见 Dropdown ）。在Multiselect模式下，点击后看起来像是一个灰色栏（看起来:hover css在点击后保持活动状态），一切正常。

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

过程：

打开下拉列表
点击Multiselect
移动鼠标，多重选择保持高亮显示，就像＆＃34;：焦点＆＃34;标签未被删除。

目视： 此图片中鼠标超过345，Multiselect应突出显示。

Multiselection

用于下拉列表的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中，但它是标准的bootstrap CSS。任何帮助将不胜感激。

Answer 1

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

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

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

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

奇数角度/引导下拉行为

1 个答案: