Reverse CSS changes done my jQuery -
so i'm doing. have default set of css each element, need modify on click.
is there easy way reverse change done jquery action? rolling default set styles? manually, automatically, somehow without hard coding anything.
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); }
use classes specify css properties. jquery has addclass , removeclass add/remove classes.
Comments
Post a Comment