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

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

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

Answer 2

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

<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
});

希望它有所帮助！

尼克

Answer 3

我会这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

$(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');
    }
  });
});

＆＃13;

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

＆＃13;

Answer 4

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

如何更改font-awesome图标？

4 个答案: