javascript - 单击后将 Bootstrap .navbar-toggle 返回到其正常状态

Question

开箱即用地使用 Bootstrap v3.3.4，无需自定义 CSS。

单击汉堡包按钮时，导航会按预期展开，但按钮本身仍处于“按下”模式，只有在单击页面其他位置时才会恢复正常状态。

有谁知道如何让汉堡包按钮在被点击后立即恢复到正常状态吗？

这是我指的按钮，以避免混淆:

<button class="navbar-toggle" data-toggle="collapse">...

Answer 1

这是因为按钮保持焦点，并为此 Bootstrap 样式。

更改伪选择器的样式 :focus:

.navbar-default .navbar-toggle:focus{
    background-color: transparent;
}

请注意，您需要重新应用 :hover 样式，因为当按钮同时处于焦点和悬停状态时，:focus 样式将优先:

.navbar-default .navbar-toggle:hover{
    background-color: #ddd;
}

Bootply