Javascript 替换单击函数中的类

我需要替换click函数中的一些类名

我有这行代码，它在单击按钮时添加了正确的类：

showLeft.onclick = function() {
    $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceInLeft visible");
};

---

当我再次单击按钮时，如何将上述类名替换为以下内容：

animated bounceOutlet hidden

，反之亦然？

您只想将

可见的

替换为

隐藏的

，将

bounceIn

替换为

反弹的

.toggleClass("bounceInLeft visible").toggleClass("bounceOutLeft hidden");

并使用

addClass

进行

animated

，这是您想要保留的

请参见以下内容：

showLeft.onclick = function() {
    if($(".cbp-spmenu-open ul li.inview").hasClass('hidden')) {
        $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceInLeft visible");
    } else {
        $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceOutLeft hidden");
    }
}

它检查元素是否隐藏并使其可见。

在html中（如果可能），尝试将

bounceOutletft

和

hidden

添加到

li.inview

元素中

如果没有，请在页面加载时使用jquery添加它们

$(".cbp-spmenu-open ul li.inview").addClass("bounceOutLeft hidden"); // only when you can't edit the html
showLeft.onclick = function() {
  $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceOutLeft bounceInLeft visible hidden");
};

像这样：

showLeft.onclick = function() {
    if($(".cbp-spmenu-open ul li.inview").hasClass("hidden")
        $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceInLeft visible");
    else
       $(".cbp-spmenu-open ul li.inview").toggleClass("animated bounceOutLeft hidden");
};

用这个

showLeft.onclick = function() {
    $(".cbp-spmenu-open ul li.inview").toggleClass('bounceInLeft visible').toggleClass('bounceOutLeft hidden');
};

或者这个：

showLeft.onclick = function() {
    var $li = $(".cbp-spmenu-open ul li.inview");
    if($li.hasClass('visible'))
        $li.removeClass('bounceInLeft visible').addClass('bounceOutLeft hidden');
    else
        $li.removeClass('bounceOutLeft hidden').addClass('bounceInLeft visible');
};

---

最好有一个if条件&使用addclass和removeClass.fixed，不要理解即时-1