jquery - 切换列表中的图标

Question

我有一个在这里定义的列表http://jsfiddle.net/NNFEh/7/

这是一个快照：

<ul id="Boss">
    <li class="B">Beverages
        <ul>
            <li class="C">Hot
                <ul>
                    <li><a href="#">Lorem Ipsum</a>
            </li>
            <li><a href="#">Medswer</a>
            </li>
                </ul>
            </li>

        </ul>
    </li>

我正在尝试向所有父节点添加一个 +/- 图标，即那些具有 class=B、class=C 的节点。请参阅http://jsfiddle.net/NNFEh/7/上的 CSS 类，我已将图标设置为 CSS 精灵

最初，两个父节点（class=B）应该有一个“+”。当用户点击任何这个父节点时，它应该变成“-”并切换等等。

我怎样才能做到这一点。提前致谢。

Answer 1

首先，你的图标类没有设置。然后，您需要在两个类之间切换

$(function () {
    $('#Boss ul').hide();//Hide everything
    $('#Boss li').addClass('icon'); //Add the common class
    $('#Boss li').addClass('closed'); //Add the class of the toggle to closed
    $('#Boss li').on('click', function (e) {
        $(this).children('ul').slideToggle() //Open/Close
        $(this).toggleClass( "opened" ); //If it's open, it will remove the class or add it
        $(this).toggleClass( "closed" ); //If it's closed, it will remove the class, or ad it
    });
});