Question

我很想建立一个我可以点击按钮（箭头图标字体）的foote ... 我想在页脚打开时更改箭头，并在关闭时返回原始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');
});

更改Html和toggleClass

3 个答案: