javascript - jQuery - 切换内容

Question

一旦内容可见，如何切换按钮文本？再次点击按钮如何隐藏内容？

这就是我的意思:JSFiddle

我想将按钮文本从查看内容更改为隐藏内容，并将图标类从 fa-arrow-circle-down 更改为 fa-arrow-circle-up

$('.js-show-content').bind('click', function(){
    $(".content").slideDown(200);
    return false;
});

Answer 1

你可以这样做:

$('.js-show-content').bind('click', function(){
    $('.content').slideToggle(200);
    $(this).find('i').toggleClass('fa-arrow-circle-down fa-arrow-circle-up');
    $(this).find('span').html(function(i, text){
      return text === 'Hide content' ? 'View content' : 'Hide content';
    });
    return false;
});

此外，您必须通过将按钮文本包装在 span 中来稍微修改 HTML，这样当您修改文本时，您不会删除 i 元素:

<a class="js-show-content btn btn-default" href="#" role="button"><i class="fa fa-arrow-circle-down fa-md"></i> <span>View content</span></a>

正如其他人所说，您可以使用 jQuery 的 slideToggle使用一行代码显示/隐藏 .content div。下一部分使用 toggleClass在 i 元素上的 up 和 down 箭头图标之间切换。最后，我们用简化的 if/else statement 替换文本它检查按钮的当前文本，如果匹配则更改文本，如果不匹配则切换回初始文本。

Updated Fiddle