内容可见后如何切换按钮文本?如果再次单击该按钮,如何隐藏内容?
这是我的意思: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。下一部分使用toggleClass在up
元素上的down
和i
箭头图标之间切换。最后,我们用简化的if/else statement替换文本,该文本检查按钮的当前文本,如果匹配,则更改文本,如果不匹配,则切换回初始文本。Updated Fiddle
关于javascript - jQuery-切换内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32461932/