jquery - Font-Awesome 带有滑动 JQuery 代码错误

Question

我正在使用 Font Awesome 创建一个 JQuery 滑动导航(参见:http://fortawesome.github.io/Font-Awesome/)

现在添加 CSS，因为这是第三方网络字体图标，我想知道如何使用 + 和 - 图标将它应用到我自己的代码中。

+ -> <i class="fa fa-plus"></i> fa-plus

- -> <i class="fa fa-minus"></i> fa-minus

我的 jQuery 代码是。

$("#toggle > li > div").click(function(){
    if(false == $(this).next().is(':visible')) {
        $('#toggle ul').slideUp();  
        $("span.minus-btn").removeClass('minus-btn');
    }
    $(this).next().slideToggle();
});


$("#toggle > li > div").click(function() {

         $("#toggle > li > div").removeClass("active");
         $(this).addClass('active');

if($(this).hasClass("active")){
       $("span.plus-btn", this).toggleClass('minus-btn');
         }
});

现在我是股票我什至不知道如何修复图标的大小。请帮忙。

这是 JQuery Fiddle 链接:http://jsfiddle.net/SG7LZ/6/

有什么好的帮助+解释吗？

请告诉我 JSFiddle 上的解决方案，以便我检查代码和结果。

非常感谢!

Answer 1

抱歉，我发现很难绕过你的代码，所以我做了一个新的 fiddle 。 Fiddle

要更改图标，您必须进入 i.fa 元素并删除 .fa-plus 类并添加 .fa-minus 类。

此外，您还可以通过添加以下类之一来设置图标的大小:.fa-2x、.fa-3x、.fa-4x、.fa-5x。