jquery - Font Awesome 图标上的错误 JQuery

Question

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

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

我的 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

您可以将相同的样式添加到用于主要图标的 font-size 属性，因此您的 css 将如下所示:

span.plus-btn{
    float: right;
    font-size: 26px;
    height: 30px;
    width: 43px;
    margin-top: -34px;
    padding:0;
    color: #fff;
}

最后，我必须重写您的代码才能让图标切换正常工作。

在代码中，我引用了当前菜单图标的变量 $currIcon=$(this).find("span.the-btn > i") 然后我改变了所有图标，但不是当前处于压缩状态(加号)的状态。

现在使用 toggleClass 我在先前存储的元素 $currIcon 上显示加号/减号图标

演示:http://jsfiddle.net/npNXT/