jQuery菜单与CSS的精灵

Question

我有一个jQuery菜单，它工作正常，我想添加一个CSS精灵，以便'李'关闭时它有一个加号，当它展开时它有一个减号。

基于下面代码的任何建议吗？

谢谢

$(document).ready(function() { 

$('#sidenav > li > ul, #sidenav > li > ul > li > ul').hide(); 

$('#sidenav > li').click(function(){ 
$ul = $(this).children('ul').slideDown('slow'); 
$('#sidenav > li > ul').not($ul).slideUp('slow'); 
}); 

$('#sidenav > li > ul > li').click(function(){ 
$ul = $(this).children('ul').slideDown('slow'); 
$('#sidenav > li > ul > li ul').not($ul).slideUp('slow'); 
}); 
}); 

HTML

<ul id="sidenav"> 
<li class=""><a href="#">Menu 1</a> 
    <ul> 
     <li class=""><a href="#">Submenu 1</a>  
      <ul>    
       <li>Submenu-1A</li> 
       <li>Submenu-2A</li>      
      </ul>   
     </li> 
     <li class=""><a href="#">Submenu 2</a>  
      <ul> 
       <li>Submenu-1A</li> 
       <li>Submenu-2A</li>      
      </ul>    
     </li> 
     <li>Submenu 3</li> 
    </ul> 
</li> 

<li class=""><a href="#">Menu 2</a> 
    <ul> 
     <li>Submenu 1</li> 
     <li>Submenu 2</li> 
     <li>Submenu 3</li> 
    </ul> 
</li> 

<li class=""><a href="#">Menu 3</a> 
    <ul> 
     <li>Submenu 1</li> 
     <li>Submenu 2</li> 
     <li>Submenu 3</li> 
    </ul> 
</li> 
</ul> 

Answer 1

只需添加一个类，如果锂是活跃，并根据定义样式：

事情是这样的：

li{ 
    background: url(...) no-repeat 0 0; 
} 

li.active{ 
    background-position:20px 0; <- adjust accordingly 
} 

也添加函数clickhandler切换类：

$('#sidenav > li').click(function(){ 
    ... 
    $(this).toggleClass("active"); 
}); 

你可以重写你的函数clickhandler采取全模糊了你的代码：

（未经测试）

$('#sidenav li').click(function(){ 
    $(this).toggleClass("active") 
      .children("ul").toggleSlide(); 
}); 

Answer 2

你可以添加一些类像active当您的li wan点击并删除它时，例如与

$('li').click(function(){ 
    $(this).toggleClass('active'); 
}); 

和css显示加图像时，它是正常和负图像时，它是active

Answer 3

借助于检查是否有+或 - 的帮助下（） 在该跨度我有'+'符号第一

jQuery("id").toggle(); 
    var cur_symbol = jQuery('id span').html(); 
    if(cur_symbol == ' + '){jQuery('id span').html(' - ');} 
    else{jQuery('#more_opt span').html(' + ');} 
     });