Question

我做了一个按钮，它的目的是在屏幕较小时切换菜单。我有一切工作，当我点击图标切换“菜单汉堡包”它扩展并显示X而不是菜单汉堡包，反之亦然。当我连续多次快速点击图标时，问题出现了，我可以告诉切换不会与图标一起使用。我想，当屏幕很小时，显示菜单图标（它做对了），当我点击它时，它应该展开其他选项以及图标更改为X.所以基本上连接菜单和图标，所以图标不会超前自己。我觉得我的问题出在jQuery中，但我不确定它是什么，或者我怎么能同时使用这两个。我在bootstrap导航栏上有这个切换按钮谢谢！

jQuery(function ($) {
    $('#togglebtt').on('click', function () {
        $(this).find('span').toggleClass('glyphicon-menu-hamburger').toggleClass('glyphicon-remove');
            });
        });

在我的按钮

下面

<button  id="togglebtt" type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed">
    <span class="glyphic glyphicon-menu-hamburger"></span></button>

Answer 1

这有点长，但应该更加一致：

jQuery(function ($) {
    $('#togglebtt').on('click', function () {
       if ($(this).find('span').hasClass('glyphicon-menu-hamburger')) {
         $(this).removeClass('glyphicon-menu-hamburger')
                .addClass('glyphicon-remove');
       } else {
         $(this).removeClass('glyphicon-remove')
                .addClass('glyphicon-menu-hamburger');
       }
    });
});

编辑：

另外，请参阅此小提琴替代方法（FontAwesome而不是glyphicons）：http://jsfiddle.net/arunpjohny/t763P/

如何修改我的代码并在点击切换菜单时更改字形

1 个答案: