jquery单击dt的时候把dd内容收起来，然后在dt里的图标变-

Question

jquery收缩的时候如何把 - 的图标 变+ ？
展开的时候把 + 变成 - 的图标？
+是fa-plus-square-o的类标
-是f-minus-square-o的类标
请问如何收缩的时候把f-minus-square-o删除 具体写法是怎么写？

<div class="public-slider">
    <dl class="side-btn">
        <dt>
            <i class="fa fa-minus-square-o fa-plus-square-o"></i>
            <a class="dt-1">个人中心</a>
        </dt>
    </dl>
    <dl>
        <dt>
            <i class="fa fa-minus-square-o"></i>
            <a>订单中心</a>
        </dt>
        <dd><a href="###">我的订单</a></dd>
        <dd><a href="###">收藏夹</a></dd>
        <dd><a href="###">我的退款</a></dd>
        <dd><a href="">收货地址</a></dd>
        <dd><a href="">我的购物</a></dd>
    </dl>
    <dl>
        <dt>
            <i class="fa fa-minus-square-o"></i>
            <a>关注中心</a>
        </dt>
        <dd><a href="">关注的商品</a></dd>
        <dd><a href="">关注的品牌</a></dd>
        <dd><a href="">关注的活动</a></dd>
        <dd><a href="">浏览历史</a></dd>
    </dl>
    <dl>
        <dt>
            <i class="fa fa-minus-square-o"></i>
            <a>我的资产</a>
        </dt>
        <dd><a href="">开抢钱包</a></dd>
        <dd><a href="">卡券管理</a></dd>
        <dd><a href="">积分管理</a></dd>
    </dl>
    <dl>
        <dt>
            <i class="fa fa-minus-square-o"></i>
            <a>个人信息管理</a>
        </dt>
        <dd><a href="">个人资料</a></dd>
        <dd><a href="">安全中心</a></dd>
        <dd><a href="">管理收货地址</a></dd>
        <dd><a href="">我的消息</a></dd>
    </dl>
</div>

$("dt").click(function(){
    $(this).nextAll("dd").removeClass("fa-plus-square-o").slideToggle("hide");
});

请输入代码