如何更改font-awesome图标？

I have a number of nav elements as shown below:

我有许多导航元素，如下所示：

<li>
    <a href="#"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li>
            <a href="#">Add New</a>
        </li>
        <li>
            <a href="#">View / Edit</a>
        </li>
        <li>
            <a href="#">Inactive List</a>
        </li>
    </ul>
</li>

It shows closed folder icon when I have that item both collapsed or open.

当我将该项目折叠或打开时，它会显示已关闭的文件夹图标。

When clicked on the title to expand, I want it to change to fa-folder-open and when clicked again to close it, I want it to change to fa-folder. Since there are many such nav items, it should affect only the one that's being clicked.

单击要展开的标题时，我希望它更改为fa-folder-open，再次单击以关闭它时，我希望它更改为fa-folder。由于存在许多此类导航项，因此它应仅影响被单击的导航项。

Which event and on which element (in jQuery) is best to support this in all browsers?

哪个事件以及哪个元素（在jQuery中）最适合在所有浏览器中支持？

4 个解决方案

#1

I would do it like this:

我会这样做：

$(document).ready(function() {
  $('.navbutton').click(function() {
    $(this).find('.fa-folder,.fa-folder-open').toggleClass('fa-folder').toggleClass('fa-folder-open');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<li>
    <a href="#" class="navbutton"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li>
            <a href="#">Add New</a>
        </li>
        <li>
            <a href="#">View / Edit</a>
        </li>
        <li>
            <a href="#">Inactive List</a>
        </li>
    </ul>
</li>

---

If you want to close every folder icon when opening another menu point, you can use this code:

如果要在打开另一个菜单点时关闭每个文件夹图标，可以使用以下代码：

$(document).ready(function() {
  $('.navbutton').click(function() {
    var currentFolder = $(this).find('.fa-folder,.fa-folder-open');
    var openFolders = $(this).parents('.mainList').find('.fa-folder-open');
    var currentFolderAlreadySwitched = false;

    // it goes through all the folder icons and toggles its classes. if the currently clicked icon is also part of this list, it should only be switched once (so it is flagged as already switched)
    openFolders.each(function() {
        $(this).toggleClass('fa-folder fa-folder-open');
        if($(this).get(0) === currentFolder.get(0)) {
            currentFolderAlreadySwitched = true;
        }
    });

    // if the current folder was open, it would already be closed by the code above. therefore, it would open it right again here (so skip it)
    if(!currentFolderAlreadySwitched) {
        currentFolder.toggleClass('fa-folder fa-folder-open');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<ul class="mainList">
    <li>
        <a href="#" class="navbutton"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="#">Add New</a>
            </li>
            <li>
                <a href="#">View / Edit</a>
            </li>
            <li>
                <a href="#">Inactive List</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" class="navbutton"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="#">Add New</a>
            </li>
            <li>
                <a href="#">View / Edit</a>
            </li>
            <li>
                <a href="#">Inactive List</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" class="navbutton"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
        <ul class="nav nav-second-level">
            <li>
                <a href="#">Add New</a>
            </li>
            <li>
                <a href="#">View / Edit</a>
            </li>
            <li>
                <a href="#">Inactive List</a>
            </li>
        </ul>
    </li>
</ul>

#2

You could try doing that using the .toggleClass method. Doing it in a way suggested by Nicolas would be rather clumsy since you would need additional code to change them back again and toggle is much more semantically correct in this context.

您可以尝试使用.toggleClass方法执行此操作。以Nicolas建议的方式进行操作会非常笨拙，因为您需要额外的代码才能再次更改它们，并且在此上下文中切换更加语义正确。

$('li a').click(function(){
    $(this).find('i').toggleClass('fa-folder fa-folder-open');
});

#3

you can change the class of the element and it will change the icon. For example, you can do something like this :

您可以更改元素的类，它将更改图标。例如，您可以执行以下操作：

<a href="#" class="firstMenuItem"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>

$('.firstMenuItem').on('click', function(){
    $(this).find('i').removeClass('fa-folder').addClass('fa-folder-open');
    // rest of the code
});

hopes it helps !

希望它有所帮助！

• Nic
• 尼克

#4

In jQuery: JS Bin Link: http://jsbin.com/razaxis Thanks to @ssc-hrep3 example.

在jQuery中：JS Bin Link：http：//jsbin.com/razaxis感谢@ ssc-hrep3的例子。

$(document).ready(function() {
  $('ul li ul').hide();
  $('.navbutton').click(function() {
    $(this).parent().find('ul').toggle();
    $(this).find('.fa-folder,.fa-folder-open').toggleClass('fa-folder').toggleClass('fa-folder-open');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul>
  <li>
    <a href="#" class="navbutton"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li>
            <a href="#">Add New</a>
        </li>
        <li>
            <a href="#">View / Edit</a>
        </li>
        <li>
            <a href="#">Inactive List</a>
        </li>
    </ul>
</li>
    <li>
    <a href="#" class="navbutton"><i class="fa fa-folder fa-fw"></i> Job Title<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
        <li>
            <a href="#">Add New</a>
        </li>
        <li>
            <a href="#">View / Edit</a>
        </li>
        <li>
            <a href="#">Inactive List</a>
        </li>
    </ul>
</li>
  </ul>