Question

我的toggleclass功能不起作用，我也不知道为什么。感谢任何帮助！

的jsfiddle： http://jsfiddle.net/t763P/1460/

<li id="toggle-favicon">
    <a href="#">Orders <span class="fas fa-chevron-left"></span></a>
    <ul class="nav nav-second-level">
        <li>
            <a href="#">File orders</a>
        </li>
        <li>
            <a href="#">Product orders</a>
        </li>
    </ul>
</li>

$('#toggle-favicon').click(function(){
    $(this).find('span').toggleClass('fa-chevron-left fa-chevron-down');
    console.log($(this).find('span'));
});

Answer 1

在最新版本的字体中，<span class="fas fa-chevron-left"></span>将转换为某些SVG元素。并删除相应的span元素。

因此，要更改图标的类，您需要切换此svg元素的类。

另请注意，.toggleClass不会对svg元素起作用，因为jQuery v1.x无法做到这一点。因此，您需要使用.attr("class" ... )方法。

$('#toggle-favicon').click(function() {
  var $el = $(this).find('svg');
  $el.attr("class", function() {
    return $(this).attr("class").indexOf("fa-chevron-left") != -1 ? "fa-chevron-right" : "fa-chevron-left";
  })
});

<强> Fiddle

如果您使用jQuery 3.x，那么您也可以使用.toggleClass ...

$('#toggle-favicon').click(function() {
  var $el = $(this).find('svg');
  $el.toggleClass("fa-chevron-left fa-chevron-right");
});

<强> Fiddle

Jquery toggleclass不起作用

1 个答案: