Question

所以这就是我正在做的事情。我为每个元素都有一个默认的CSS集，但是我需要在点击时修改它。

是否有简单的方法可以撤消jQuery操作所做的更改？就像回滚默认的设置样式一样？我是手动执行此操作，但我想自动执行此操作，不管怎么说都没有硬编码。

的jQuery

            main.find('li').each(function() {
                var sub1 = $(this);

                if(sub1.has('ul').length > 0) {
                    var bg = sub1.css('background-image');

                    sub1.click(function() {
                        event.preventDefault();
                        event.stopPropagation();

                        if(!sub1.find('> ul').is(':visible')) {
                            sub1.css('border-bottom', '2px solid #E1E000');
                            sub1.css('background-image', 'url(img/square0.png)');
                            sub1.find('> a').css('color', '#D8A2DD');
                        }
                        else {
                            sub1.css('border-bottom', '2px solid transparent');
                            sub1.css('background-image', bg);
                            sub1.find('> a').css('color', '#fff');
                        }

                        sub1.find('> ul').toggle();
                    });
                }
                else {
                    sub1.click(function(event) {
                        event.stopPropagation();
                    });
                }
            });

CSS

.menu > li > ul > li {
    text-transform: uppercase;
    background-repeat: no-repeat;
    background-position: left 0 top 5px;
}

.menu > li > ul > li:nth-child(3n+1) {
    background-image: url(img/square1.png);
}

.menu > li > ul > li:nth-child(3n+2) {
    background-image: url(img/square2.png);
}

.menu > li > ul > li:nth-child(3n+3) {
    background-image: url(img/square3.png);
}

Answer 1

使用类指定css属性。 jquery有addClass和removeClass来添加/删除类。

Answer 2

这将删除元素上的所有内联样式：

$("selector").attr({style : ""});

Answer 3

最易于管理的方法是根据需要添加和删除类。在下面的示例中，有一个“默认”类和一个“特殊”类。 'special'类的属性覆盖了'default'类的属性，因此我们需要做的就是控制元素是否具有'特殊'类。

假设元素sub1已经具有'default'类，并让IF语句决定它是否也具有覆盖'特殊'类。

// Assuming sub1 already has class 'default'
if (!sub1.find('> ul').is(':visible')) {
    sub1.addClass('special');
} else {
    sub1.removeClass('special');
}

CSS：

.default {
    border-bottom: '2px solid #E1E000';
    background-image: 'url(img/square0.png)';
}
.default > a {
    color: #fff;
}
.special {
    border-bottom: '2px solid transparent';
    background-image: 'url(img/square1.png)';
}
.special > a {
    color: #D8A2DD;    
}

Answer 4

你总是可以通过使用Javascript将这些样式设置为＆＃34;＆＃34;来摆脱Javascript设置的样式。

所以你要重置的样式只需要

$("selector").css({style1: "", style2: ""})

反向CSS更改完成了我的jQuery

4 个答案: