切换列表中的图标

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精灵

最初，两个父节点（类= 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
    });
});