单击Bootstrap删除焦点属性

Question

我有一个带有下拉菜单的导航栏，使用Bootstrap。我在下拉列表项周围创建了一个边框，使其看起来像是一个标签。边界只在焦点上。用户单击选项卡以将其切换为关闭但边框仍显示在那里，因为它仍处于焦点位置。如何在点击后删除焦点？

这里是CSS

    #refine2 .dropdown-toggle:active {background-color:transparent; border:0;} #refine2 .dropdown-toggle:focus {border-top: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; border-left: 1px solid #e3e3e3; background-color:transparent;}

Answer 1

快速修复：在css中设置outline:0;。这应该删除边框。

Answer 2

有点旧，但您可以通过将边框放在列表项上来解决此问题。
Working example。

#refine2 .dropdown-toggle:active {
  background-color:transparent; 
  border:0;
} 

#refine2 .dropdown-toggle:focus{ 
  background-color:transparent;
}

li.dropdown.open {
  border-top: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  border-left: 1px solid #e3e3e3;
}

Answer 3

如果你正在使用jQuery，你可以使用

Integer让它失去了它的重点

例如：

<强> JS：

$(".dropdown-toggle").blur()

更新了CSS：

var dropdown = $(".dropdown-toggle");

dropdown.on("click", function() {
  setTimeout(function(){           //loses focus after 0 milliseconds
    dropdown.blur();
  }, 0);
});

JSFiddle

希望它有所帮助：）

干杯！

编辑：我刚刚看到这是一个已有7个月大的问题......但我希望它还能帮助别人：）