Question

我使用切换功能在隐藏的div容器之间来回切换。点击＆＃39;显示更多＆＃39;链接它显示div，当点击＆＃39;显示较少＆＃39;链接它隐藏div。

这是我的代码：

$('.transcript').addClass('hide')
$(".show-more").click(function(){
$(".transcript").toggle();
$(".transcript").removeClass('hide');
$(".show-more").html('show less');
});

我遇到的问题是，当您点击“显示更多内容”时，它会显示隐藏的div，然后将链接的文字更改为“显示更少＆＃39;”。但是，该链接的文字仍为“显示较少”字样。何时它应该回到“显示更多＆＃39;当div被隐藏时。

Answer 1

我想我想出来了，这段代码似乎有效：

$('.transcript').addClass('hide');
$('.show-more').on('click', function() {
var $this = $(this);
if($('.transcript').is(':visible')) 
{
    $('.transcript').hide();
    $this.text('show more');
}
else
{
    $('.transcript').show();
    $this.text('show less');
}
});

也许现在有人可以告诉我代码是否可靠或是否需要工作？它在前端工作正常，但我不确定它是否“干净”。

jQuery切换以及如何更改文本

1 个答案: