Bootstrap 菜单动画 'x' 不要切换到重置

Question

我有一个简单的问题要解决，现在连续 2 天都在尝试解决它，但没有找到答案。

问题是导航栏切换按钮（bootstrap 移动尺寸的菜单按钮 window）单击按钮时的动画工作正常但是，当我尝试在打开时使用导航栏切换 (x) 按钮关闭菜单时，按钮中的 (x) 不会重置为 css 中的旋转 (0)文件。

工作示例 bootstrap 菜单动画按钮 http://iwebdesign.se/bare/

我的按钮有问题 http://iwebdesign.se/

我不知道问题出在哪里，所以我没有在这里粘贴任何代码。

Answer 1

这是因为按钮仍然是焦点元素。

编辑：我认为这部分使其无法恢复正常：

header .navbar-iwebdesign .navbar-toggle:focus .top-bar
    {
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 15% 85%; /* chrome */
    -webkit-transition: all 0.35s ease-in-out;
    }
header .navbar-iwebdesign .navbar-toggle:focus .middle-bar-transition-new
    {
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 10.5px -1.5px; /* chrome */
    -webkit-transition: all 0.25s ease-in-out;
    opacity: 0.5;
    }

header .navbar-iwebdesign .navbar-toggle:focus .bottom-bar
    {
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: 11% 10%; /* chrome */
    -webkit-transition: all 0.35s ease-in-out;
    }

如果我是你，我会使用 jQuery 来切换 class。

编辑：只需将此添加到您的 menu.js：

$('.navbar-toggle').on('click', function() { 
    $(this).toggleClass('collapsed');
});

并将animation.css中的上述选择器更改为：

header .navbar-iwebdesign .navbar-toggle.collapsed .top-bar
header .navbar-iwebdesign .navbar-toggle.collapsed .middle-bar-transition-new
header .navbar-iwebdesign .navbar-toggle.collapsed .bottom-bar

Bootstrap 菜单动画 'x' 不要切换到重置

Bootstrap menu animation 'x' dont toggle to reset

html

jquery

animation

togglebutton

twitter-bootstrap