奇怪的角度/自举下拉行为

Question

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

我已经从用于Bootstrap的Angular指令对ui.boostrap.dropdown进行了轻微修改（请参阅Dropdown）。一切运行良好，除了单击后的灰色条（看起来像:hover css在单击后保持活动状态）时，在多选模式下。

当我关闭然后重新打开时，高光消失，仿佛悬停事件已完成。

过程：

1. 打开下拉
2. 点击复选
3. 移动鼠标并复选保持突出显示，就好象 “：聚焦” 的标签不会被删除。

目视： 鼠标是在345在该图像中，多选应该不被突出显示。

的下拉角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; 
    }