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

您可以使用firstElementChild获取<i>，然后根据实际className更改其className，以便在您想要的两个类之间切换：

$("#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");
});

Answer 2

这可能就是你要找的东西：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;
    }
});

Answer 3

我就是这样做的：

$(".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";
    }
});

Here is the JSFiddle demo

jquery切换元素内的内容

3 个答案: