Javascript jquery在元素内切换内容

我正在尝试交换一个按钮内的内容，该按钮可切换导航折叠

我目前有以下代码

<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");

});

展开
//在js脚本中
$（“#menu-toggle-2”）。单击（函数（e）{
e、 预防默认值（）；
$（“#页”）.toggleClass（“toggled-2”）；
});

我希望能够改变的内容内被

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

折叠

但是，这需要进行切换，因此当您单击“折叠”时，它会变回其原始状态

---

似乎无法理解…

您可以使用

firstElementChild

获取

，然后根据实际的

类名更改其
类名，因此它将在您想要的两个类之间切换：

$("#menu-toggle-2").click(function(e) {
  e.preventDefault();
  var i = this.firstElementChild;
  i.className = i.className === 'fa fa-expand' ? 'fa fa-compress' : 'fa fa-expand';
  $("#page").toggleClass("toggled-2");
});

这可能就是您正在寻找的：

var=0；
$（“#menu-toggle-2”）。单击（函数（e）{
e、 预防默认值（）；
$（“#页”）.toggleClass（“toggled-2”）；
如果（单击==0）{
$（this.html（'Collapse'）；
单击=1；
}否则{
$（this.html（'Expand'）；
单击=0；
}
});
我会这样做：

$(".navbar-toggle").click(function () {
    if ($(this).text().trim() == "Expand") {
        $(this).find("i").removeClass("fa-expand").addClass("fa-compress");
        $(this).contents()[2].data = "Collapse";
    } else {
        $(this).find("i").removeClass("fa-compress").addClass("fa-expand");
        $(this).contents()[2].data = "Expand";
    }
});

注意
.className
您可能需要使用
.hasClass（class）
而不是使用jQuery，因为我可以用vanilla JS轻松地完成，如果我在其他地方做了，会发生什么：
my_I_el.className+='shit happends'
还要注意的是，IE9首先支持
firstElementChild
，而字体超级图标不会支持它。
$(".navbar-toggle").click(function () {
    if ($(this).text().trim() == "Expand") {
        $(this).find("i").removeClass("fa-expand").addClass("fa-compress");
        $(this).contents()[2].data = "Collapse";
    } else {
        $(this).find("i").removeClass("fa-compress").addClass("fa-expand");
        $(this).contents()[2].data = "Expand";
    }
});