var navObject = {
padLeft : '20px',
padLeftHover : '40px',
goRight : function(obj){
if (!obj.parent('li').hasClass('active')) {
obj.stop(true, true).animate({ 'padding-left' : this.padLeftHover }, 'fast');
}
},
goLeft : function(obj){
if (!obj.parent('li').hasClass('active')) {
obj.stop(true, true).animate({ 'padding-left' : this.padLeft }, 'fast');
}
},
makeActive : function(obj) {
obj.siblings().each(function() {
if($(this).hasClass('active')) {
$(this).removeClass('active');
navObject.goLeft($(this).children('a'));
}
});
if (!obj.hasClass('active')) {
obj.addClass('active');
}
}
}$(function() {
$('#navigation li a').hover(function() {
navObject.goRight($(this));
$(this).css({
"color": "red",
"position": "relative",
"font-size": "20px"});
}, function() {
navObject.goLeft($(this));
$(this).css({
"color": "yellow",
"font-size": "14px"});
});
$('#navigation li a').click(function() {
navObject.makeActive($(this).parent('li'));
navObject.goRight($(this));
return false;
});});
こんにちは..私はこのjqueryコードを持っています。私がここでやっているのは、ウェブサイトの垂直ナビゲーションバーです
私の問題は、ナビゲーションメニューにカーソルを合わせると、コード内のすべての CSS が実行されることです。しかし、メニューをクリックすると、テキストが赤のままになります。黄色に戻らない..
私を助けてくれてありがとう.. ^_^