jquery - 带有 CSS 精灵的 jQuery 菜单

Question

我有一个工作正常的 jQuery 菜单，我想添加一个 CSS 精灵，这样当“li”关闭时它有一个加号，当它展开时它有一个减号。

请根据以下代码提出任何建议？

谢谢

$(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

Just add a class if the li is active and define styles accordingly:

Something like this:

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

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

also add the clickhandler to toggle classes:

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

You could rewrite your clickhandler to take the whole fuzz out of your code:

(untested)

$('#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

在 html() 的帮助下检查它是否有 + 或 - 在那个范围内我首先有 '+' 符号

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