Question

我需要在点击功能中替换一些类名。

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

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

当我再次点击该按钮时，如何用以下内容替换上述类名：animated bounceOutLeft hidden，反之亦然？

Answer 1

您只想将visible替换为hidden，将bounceIn替换为bounceOut

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

并将addClass用于您要保留的animated。

请参阅example fiddle

Answer 2

这个怎么样：

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

检查您的元素是否隐藏，并使其可见或不可见。

Answer 3

在您的html中（如果可能）尝试将bounceOutLeft和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");
};

Answer 4

像这样：

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

Answer 5

使用此

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');
};

替换单击函数中的类

5 个答案: