如何更改字体真棒图标？

Question

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

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

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

单击标题展开时，我希望将其更改为fa-folder-open，再次单击以将其关闭时，我希望将其更改为fa-folder. 由于有很多这样的nav项目，它应该只影响被点击的项目。

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

Answer 1

我会这样做：

$(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>

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

$(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>