jQuery显示隐藏内容和更改链接

Question

在我公司的某些页面上,我想在点击链接时使用显示和隐藏切换细节.

我用过.toggle()但....

但这是一个小问题,而用户点击显示更多内容应该向下滑动更重要的是这个文本'显示更多'应该更改为" 显示更少 ",这应该是切换.我希望你清楚我真正需要的东西.

谢谢

Answer 1

John McCollum基本上有你的答案,但你也可以使用Javascript简写来使你的代码更紧凑:

$('#toggle').click(function(ev) { 
    $('#content').toggle(); 
    this.html(($('#toggle').text() == 'Show more') ? 'Show less' : 'Show more');
 })

编辑:为清楚起见,我还将添加html上述代码所需的标记.在这个例子中,一切都显示为开头.

<p><a id="toggle" href="#">Show less</a></p>
<div id="content"><!-- your stuff goes here. --></div>

如果您希望将其隐藏起来,只需更改链接文本"Show more"并将以下样式规则添加到样式表:

#content { display: none; }