内容可见后如何切换按钮文本?如果再次单击该按钮,如何隐藏内容?

这是我的意思:JSFiddle

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

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

最佳答案

您可以这样做:

$('.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。下一部分使用toggleClassup元素上的downi箭头图标之间切换。最后,我们用简化的if/else statement替换文本,该文本检查按钮的当前文本,如果匹配,则更改文本,如果不匹配,则切换回初始文本。

Updated Fiddle

关于javascript - jQuery-切换内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32461932/

10-12 12:25
查看更多