用于添加和删除类的 Jquery 打开/关闭变量

Jquery open/close variable for adding and removing class

本文关键字：打开变量 Jquery 添加删除用于更新时间：2023-09-26

如您所见，我想做和if/else语句来添加和删除类。但是下面的 if/else statematen 对我并不真正有用，它添加了类，但当我第二次单击时，它不会再次删除它们。

    function showAndHidediv(id, liName) {
        $("#" + id).toggle(function () {
            $("#" + id).animate({
               display: 'block'
            }, 500);
            var open = "closed";
            if (open == "open") {
                $("#" + liName + " a").removeClass('color');
                $("#" + liName + " a div").removeClass('block');
                $("#" + liName + " img").removeClass('block');
                open = "closed";
            } else {
                $("#" + liName + " a").addClass('color');
                $("#" + liName + " a div").addClass('block');
                $("#" + liName + " img").addClass('block');
                open = "open";
            }
        });
    }

您可以使用切换类来解决问题。

在上面的代码片段中，您已经采用了本地 JS 变量.i.e.var open = "closed";

所以每次它的加特重置。

尝试全局声明"open"变量，然后检查。它会起作用。

由于您使用的是jQuery，因此使用内置函数toggleClass()会更方便：

$( "p" ).click(function() {
  $( this ).toggleClass( "highlight" );
});

演示小提琴

而您的情况：

function showAndHidediv(id, liName) {
    $("#" + id).toggle(function () {
        $("#" + id).animate({
           display: 'block'
        }, 500);
        $("#" + liName + " a").toggleClass('color');
        $("#" + liName + " a div").toggleClass('block');
        $("#" + liName + " img").toggleClass('block');
    });
}

像这样尝试

function showAndHidediv(id, liName) {
            $("#" + id).toggle(function () {
                $("#" + id).animate({
                   display: 'block'
                }, 500);
                var open = false;
                if (open == "open") {
                    $("#" + liName + " a").removeClass('color');
                    $("#" + liName + " a div").removeClass('block');
                    $("#" + liName + " img").removeClass('block');
                    open =false;
                } else {
                    $("#" + liName + " a").addClass('color');
                    $("#" + liName + " a div").addClass('block');
                    $("#" + liName + " img").addClass('block');
                    open = true;
                }
            });
        }