【问题标题】：jQuery - Toggle contentjQuery - 切换内容
【发布时间】：2015-09-09 00:17:21
【问题描述】：

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

这就是我的意思：JSFiddle

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

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

【问题讨论】：

标签： javascript jquery

【解决方案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

【讨论】：

无需拨打toggleClass两次。您可以在以空格分隔的列表中传递类名。 .toggleClass('fa-arrow-circle-down fa-arrow-circle-up').

【解决方案2】：

https://jsfiddle.net/brunodd/0gctxtmv/

我不知道您的按钮文本，但现在当您再次单击时它会再次切换回来

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

【讨论】：

【解决方案3】：

jQuery 有一个名为 .slideToggle() 的内置函数，您可以在此处阅读：http://api.jquery.com/slidetoggle/

除此之外，您只需要使用条件来更改 CSS 属性，尽管我建议，如果您使用自己的 CSS 来制作默认 CSS 属性，则当您单击添加一个类时覆盖该箭头。再次单击 - 删除覆盖 CSS 类并将按钮恢复为默认值

【讨论】：

【解决方案4】：

您可以使用 jquery 滑动切换来实现该效果。

$( ".js-show-content" ).click(function() {
  $( ".content" ).slideToggle( "slow" );
});

【讨论】：

【解决方案5】：

这是一种简单的方法：

$('.js-show-content').bind('click', function () {
    var btn = $(this);
    $(".content").slideToggle(200, function () {
        // Toggle button content            
        if (btn.find('.fa-arrow-circle-down').length)
            btn.html('<i class="fa fa-arrow-circle-up fa-md"></i> Hide content');
        else
            btn.html('<i class="fa fa-arrow-circle-down fa-md"></i> View content');
    });
    return false;
});

JSFiddle：http://jsfiddle.net/0gctxtmv/4/

【讨论】：