jQuery切换nav css样式

Question

我有一个jQuery切换导航菜单作为页面上的辅助导航。

我想在顶级导航中添加一个活动的“状态”。现在只有一个“悬停”状态..活跃的“状态”应该显示“精灵图像”的另一种颜色..

http://awesomescreenshot.com/07c1w39kc1

我试图使用：

.title1 {
padding-left:15px;
height:17px;
background: url(images/arrow-toggle.png) 0 3px no-repeat !important;
cursor:pointer;
margin-bottom:3px;
color:#168716;

}
.title1 a p:hover, .on a p { 
    background:url(images/bg_subNaviArrow.jpg);
    background-position:-20px -208px;
    margin-left: -16px; 
    padding-left: 16px; 
}

.title1 p {
   color: #000;
   max-width: 167px; 
   font-size: 12px;
   padding: 1px 3px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-style: italic;
}

.on {
background: url(images/arrow-toggle.png) 0 0px no-repeat !important;
}

这是jQuery代码，

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('.title1').click(function() {    

        $('.title1').removeClass('on');    
        $('.content2').slideUp('normal'); 

        if($(this).next().is(':hidden') == true) {    
            $(this).addClass('on');    
            $(this).next().slideDown('normal');
        }

    });

});
</script>

网址测试页面http://planeta.se/nordcharkLast/recept-2/