javascript - jquery 切换元素内的内容

Question

我正在尝试换出切换导航折叠的按钮内的内容。

我目前有以下代码；

<button class="navbar-toggle collapse in" data-toggle="collapse" id="menu-toggle-2"> <i class="fa fa-expand" aria-hidden="true"></i> Expand</button>
//in js script
$("#menu-toggle-2").click(function(e) {
    e.preventDefault();
    $("#page").toggleClass("toggled-2");

});

我希望能够将其中的内容更改为；

<i class="fa fa-compress" aria-hidden="true"></i> Collapse

但是这需要切换，所以当你点击折叠时，它会变回原来的状态

似乎无法弄清楚...

Answer 1

这可能是您正在寻找的:https://jsfiddle.net/oaftwxt2/

var clicked = 0;

$("#menu-toggle-2").click(function(e) {
    e.preventDefault();
    $("#page").toggleClass("toggled-2");

    if(clicked == 0){    
        $(this).html('<i class="fa fa-compress" aria-hidden="true"></i> Collapse');
        clicked = 1;
    }else{
        $(this).html('<i class="fa fa-expand" aria-hidden="true"></i> Expand');
        clicked = 0;
    }
});