奇怪的角度/引導下拉行為

Question

我有一個需要一系列下拉菜單的應用程序。 該功能要求我能夠在常規下拉行為和多選行為之間進行切換。

我對Angular Directives for Bootstrap的ui.boostrap.dropdown進行了一些修改（請參閱Dropdown ）。 在多選模式下，單擊后的灰色條（單擊后看起來像:hover css保持活動狀態）除外，一切正常。

當我關閉然后重新打開時，突出顯示消失，好像懸停事件已經完成一樣。

處理：

1. 打開下拉菜單
2. 單擊多選
3. 移動鼠標，Multiselect將保持突出顯示狀態，就像未刪除“：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;
    }