单击引导时删除焦点属性答案

【问题标题】：Remove focus attribute on click Bootstrap单击引导时删除焦点属性
【发布时间】：2016-08-17 23:45:38
【问题描述】：

我有一个使用 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;}

【问题讨论】：

能否展示相关的css、html和javascript（如果有）代码？
@DrewKennedy 我添加了 CSS。

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：

我没有说我有大纲，我写的是“边框”。我在 CSS 中设置的边框。不是浏览器添加的蓝色轮廓。
添加了我的 CSS。 html 只是标准的引导标记。

【解决方案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;
}

【讨论】：

【解决方案3】：

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

$(".dropdown-toggle").blur() 让它失去焦点

例如：

JS：

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

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

更新的 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;
  }

#refine2 .dropdown-toggle{
    background-color: transparent !important;
  }
  li.dropdown.open {
    background-color: transparent;
  }

JSFiddle

希望它有所帮助:)

干杯！

编辑：我刚刚看到这是一个 7 个月大的问题......但我希望它仍然可以帮助其他人:)

【讨论】：

可能会更新以修复透明背景丢失的问题。