javascript - 使用 jQuery 动态更新图标

Question

我正在使用 HTML5 和 jQuery 编写一个简单的 Accordion 代码来为打开和关闭状态设置动画。

我想在 Accordion 部分打开或关闭时使用超棒的字体图标直观地向用户展示。目前，我已经设法使用以下代码实现了这一点:

$(this).find('i').toggleClass('fa fa-plus-circle fa fa-minus-circle')

唯一的问题是我无法弄清楚如何在不处于打开状态时将每个部分图标重置为加号图标。例如，如果我单击项目 1，图标现在将从加号变为减号，太棒了!但问题是，如果我点击项目 2 或 3，图标将不会恢复为加号。

正如我在上面的屏幕截图中所说明的，这就是我想要实现的目标。我以项目 1 和项目 3 为例，但它对所有项目的工作方式应该相同。

我提供了一个 JSFiddle with my syntax ，这是代码:

$(document).ready(function () {
    'use strict';
    $('.accordian h3').click(function () {
        //toggle plus and minus icons
        $(this).find('i').toggleClass('fa fa-plus-circle fa fa-minus-circle');
        //slide up all the list items
        $('.accordian ul ul').slideUp();
        //slide down the list itmes below the h3 clicked - only if it's closed
        if (!$(this).next().is(':visible')) {
            $(this).next().slideDown();
        }
    });
});

@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
html, body {
    background-color: #ccc
}
.accordian {
	margin: 0 auto;
	color: #000;
}
.accordian h3 {
	padding: 15px;
    line-height: 1px;
	cursor: pointer;
    border: 1px solid #000;
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
/*iconfont styles*/
.accordian h3 i {
    font-size: 18px;
	margin-right: 10px;
}
.accordian li {
	list-style-type: none;
}
/*Lets hide the non active li's by default*/
.accordian ul ul {
	display: none;
}
.accordian li.active ul {
	display: block;
}

 <div class="accordian">
     <ul>
         <li>
             <h3><i class="fa fa-plus-circle"></i>Item 1</h3>
             <ul>
                 <li>
                     Item 1
                 </li>
             </ul>
         </li>
         <li>
             <h3><i class="fa fa-plus-circle"></i>Item 2</h3>
             <ul>
                 <li>
                     Item 2
                 </li>
             </ul>
         </li>
         <li>
             <h3><i class="fa fa-plus-circle"></i>Item 3</h3>
             <ul>
                 <li>
                     Item 3
                 </li>
             </ul>
         </li>
     </ul>
 </div>

Answer 1

$(document).ready(function () {
    'use strict';
    $('.accordian h3').click(function () {
        //toggle plus and minus icons
        $('.accordian h3 i').addClass('fa-plus-circle').removeClass('fa-minus-circle');
        $(this).find('i').toggleClass('fa fa-plus-circle fa fa-minus-circle');
        //slide up all the list items
        $('.accordian ul ul').slideUp();
        //slide down the list itmes below the h3 clicked - only if it's closed
        if (!$(this).next().is(':visible')) {
            $(this).next().slideDown();
        }else{
            $('.accordian h3 i').addClass('fa-plus-circle').removeClass('fa-minus-circle');
        }
    });
});

JSFIDDLE