尝试切换 Bootstrap 按钮文本 onclick 与 jquery

Question

我有一个移动导航，想要替换 bootstrap 折叠按钮的文本。如果单击菜单，则更改为 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

之所以没有按您想要的方式工作，是因为它占用了该按钮内的所有文本。这意味着它需要 "Toggle Navigation MENU"。您必须摆脱它，并且 Trim 分机才能使比较按预期进行。其他需要考虑的是大写字母与小写字母不同。 'Menu' 和 "MENU" 对计算机来说是不一样的。

固定代码如下：

    $(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，这就像一个魅力。

尝试切换 Bootstrap 按钮文本 onclick 与 jquery

Trying to toggle Bootstrap Button text onclick with jquery

navigation

mobile

jquery

twitter-bootstrap