尝试使用 jquery 切换 Bootstrap Button 文本 onclick

Question

我有一个移动导航，并且想要替换引导折叠按钮的文本。如果单击菜单，则更改为 X。如果单击 X，则更改为菜单。 jsfiddle

$(document).ready(function() {
    $('.navbar-toggle').on('click', function () {
        if (matchMedia('(max-width: 767px)').matches) {
        var menu_text = $('.navbar-toggle').text();
            if(menu_text == 'X' ){
                $('.navbar-toggle').text("Menu");
            }
            elseif (menu_text == 'Menu'){
                $('.navbar-toggle').text("X");
            }
        }

    });
});

Answer 1

无法按您想要的方式工作的原因是因为它正在获取该按钮内的所有文本。这意味着它需要“切换导航菜单”。你必须摆脱它，而且，修剪 ext 以便比较像预期的那样工作。其他需要考虑的事情是大写字母与小写字母不同。 “菜单”和“菜单”对于计算机来说是不一样的。

这是固定代码：

    $(document).ready(function() {
    $('.navbar-toggle').on('click', function () {
        if (matchMedia('(max-width: 767px)').matches) {
           // alert('ENTERED');
            var temptxt = $('.navbar-toggle span').text().trim();
            $('.navbar-toggle span').text('');

        var menu_text = $('.navbar-toggle').text().trim();

            //alert(menu_text);
            if(menu_text == 'X' ){

                $('.navbar-toggle').text("MENU");
            }
            else if (menu_text == 'MENU'){

                $('.navbar-toggle').text("X");
            }
        }
       $('.navbar-toggle span').text(temptxt); 

    });
});

哦！我忘了说，控制台给了我一个错误，因为 elseif 所以我只是分成 else if 这就像一个魅力。