Updated Fiddle

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在up元素上的down和i箭头图标之间切换。最后，我们使用简化的if/else statement来交换文本，该文本检查按钮的当前文本，如果匹配则文本被更改，如果它不匹配则转换回初始文本。 / p>

Updated Fiddle

Answer 2

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

我不知道您的按钮文字，但现在当您重新点击

时它会再次切换回来

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

Answer 3

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

除此之外，你只需要使用条件来改变CSS属性，虽然我建议，如果你使用自己的CSS来制作一个默认的CSS属性，向下箭头，当你点击添加一个类时，覆盖那个箭头。再次单击 - 删除覆盖CSS类并将按钮恢复为默认值

Answer 4

您可以使用jquery幻灯片切换来实现效果。

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

Answer 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/

jQuery - 切换内容

5 个答案:

Updated Fiddle