Javascript 在slideToggle中的span onClick内更改html

我希望在单击标题时显示ul的内容，但同时更改该标题旁边的图标。默认情况下，图标为向下箭头，单击时ul应滑开，图标应变为向上箭头，再次单击时应变为向下箭头等

我可以让这种情况发生一次，但一旦标题被点击两次，只是停留为一个向上箭头，我想再次更改为向下箭头等。有人能告诉我正确的方向吗

谢谢

我的HTML代码：

<h4 class="mobileDrop">Find Your Way Around <span><i class="fa fa-caret-down linkIcon"></i></span></h4>

<ul class="footerNav">
     <li><a href="#">1st List Item</a></li>
     <li><a href="#">2nd List Item</a></li>
     <li><a href="#">3rd List Item</a></li>
</ul>

我的代码JS:

// footer specifics
$( ".footerNav" ).hide();
// toggle on click
$( ".mobileDrop" ).click(function() {
    $( ".footerNav" ).slideToggle( 400, function()  {
        $( ".mobileDrop span" ).html( '<i class="fa fa-caret-up linkIcon"></i>' );  
    });
});

工作小提琴

假设默认情况下只有一个插入符号类：

// footer specifics
$( ".footerNav" ).hide();
// toggle on click
$( ".mobileDrop" ).click(function() {
$( ".footerNav" ).slideToggle( 400, function()  {
    $( ".mobileDrop span i" ).toggleClass('fa-caret-up').toggleClass('fa-caret-down');  
});
});

---

您不需要更改html。只需切换类

$( ".mobileDrop" ).click(function() {
    var drop = $(this);
    $( ".footerNav" ).slideToggle( 400, function()  {
        drop.find('.fa.linkIcon').toggleClass('fa-caret-up fa-caret-down');
    });
});

试试这个：

$( ".footerNav" ).slideToggle( 400, function()  {
    var linkIcon = $(".linkIcon");
    if (linkIcon.hasClass('fa-caret-down')) {
        linkIcon.removeClass('fa-caret-down').addClass('fa-caret-up');
    } else {
        linkIcon.removeClass('fa-caret-up').addClass('fa-caret-down');
    }
});

---

您只需在类之间切换：

$( ".mobileDrop span i" ).toggleClass('fa-caret-up ','fa-caret-down');

他们将根据单击的时间间隔自动切换类

参考：

---

至于显示/不显示菜单，您可以使用：

$( ".mobileDrop" ).click(function() {
    $(".footerNav").toggle();
});

---

至于箭头，您可以为不同的箭头使用两个类，或者每次使用toggleClass更改背景图像css，谢谢faby，但这与我发布的代码基本相同。我有下拉菜单，但我需要的图标是一个向下箭头时，页面加载，因此在跨度中的图标的原因开始，然后当点击图标变为向上箭头，然后再次点击图标变为向下箭头等。我已经更新了答案。。看那。。对不起，发错了

$( ".mobileDrop" ).click(function() {
    $(".footerNav").toggle();
});