反向CSS更改完成我的jQuery

所以這就是我正在做的。每個元素都有一組默認的CSS，但我需要在點擊時對其進行修改。反向CSS更改完成我的jQuery

是否有簡單的方法來反轉由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); 
}

來源

2015-04-01 HelpNeeder

這可能是更容易簡單地添加和刪除點擊一類，並根據需要修改你的造型。 – 2015-04-01 17:59:57

由於某種原因，我無法完成這項工作，但我不確定爲什麼，我仍然必須擁有3個不同的類，並且我儘量避免編寫更多的類。 – HelpNeeder 2015-04-01 18:01:02

添加和刪除類很容易。撤銷類似「sub1.css（'border-bottom'，'2px solid transparent'）;」並不容易，因爲JS不知道'border-bottom'以前的值是什麼，如果有的話。因此，該命令的「撤銷」將僅僅是刪除「邊界 - 底部」，這可能不是你想要的。 – 2015-04-01 18:02:01

使用類指定CSS屬性。 jQuery的addClass和removeClass添加/刪除類。

來源

2015-04-01 18:08:02 tkay

是的，我知道這一點。我只是好奇，如果有其他的方式來做到這一點。 – HelpNeeder 2015-04-01 18:10:49

這個必須做，謝謝。 – HelpNeeder 2015-04-12 00:57:58

你總是可以擺脫通過的Javascript只要使用Javascript功能來設置這些樣式「」設置樣式。

所以要重置任何風格只是做

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

來源

2015-04-01 18:01:12 hobberwickey

但是這並不會將它們重置爲默認值，而是完全清除它們。對？ – HelpNeeder 2015-04-01 18:02:14

這是添加和刪除樣式的問題 - 沒有「默認」，只有JS不知道的以前的值，除非您告訴它存儲以前的值。 – 2015-04-01 18:03:47

有趣的事實：如果您將css值設置爲帶有JS的空字符串，它會將其推遲到該屬性的CSS值。 http://jsfiddle.net/34upcbz8/ – hobberwickey 2015-04-01 18:11:20

這將刪除元素上的所有內嵌樣式：

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

來源

2015-04-01 18:12:46

最易管理的方式做到這一點是添加並根據需要進行刪除類。在下面的例子中，有一個'默認'類和'特殊'類。 'special'類的屬性會覆蓋'default'類的屬性，所以我們需要做的是控制元素是否具有'special'類。

假設元素sub1已經有'default'類，並讓IF語句決定它是否也有重載的'special'類。

// 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;  
}

來源

2015-04-01 18:13:05

反向CSS更改完成我的jQuery

回答

相關問題