jquery - 更改 Html 和 toggleClass

Question

我正在尝试构建一个可以通过单击按钮（箭头图标字体）关闭的脚注...我想在页脚打开时更改箭头，并在关闭时返回原始 html...。

这是克莱蒙特的网站

这是我试图创建的 JQuery 代码

    $('.footer').addClass('closed');

    $('.footer').on('click', '.more-less', function() {
        $('.footer').toggleClass('closed open');
    });

    if ( $('.footer.open') === true) { 
        $('.more-less').html('<i class="icon-arrow_down"></i>');    
    }  

谢谢

Answer 1

我认为您可能正在寻找的是在单击链接后测试条件并根据状态更改图标（打开/关闭）

要测试元素是否具有类，请使用.hasClass()

您的条件$('.footer.open')返回一个 jQuery 包装器元素，因此您的条件永远不会为真

var $footer = $('.footer').addClass('closed');

$footer.on('click', '.more-less', function () {
    $footer.toggleClass('closed open');
    if ($footer.hasClass('open')) {
        $(this).html('<i class="icon-arrow_down"></i>');
    } else {
        $(this).html('<i class="icon-arrow_up"></i>');
    }
});

Answer 2

    $('.footer').addClass('closed');

    $('.footer').on('click', '.more-less', function() {
           $('.footer').toggleClass('closed open');

       if ( $('.footer').hasClass('open') { 
           $('.more-less').html('<i class="icon-arrow_down"></i>');    
       }
       else
       {
           $('.more-less').html('<i class="icon-arrow_up"></i>');  
       }

   });

Answer 3

甚至更便宜：

$('.footer').on('click', '.more-less', function() {
    $('.footer').toggleClass('closed open');
    $(this).find('i').toggleClass('icon-arrow_down icon-arrow_up');
});