jquery - 如何使用jQuery阅读更多链接后显示内容？

我在div中有一个“阅读更多”链接。我希望该链接后的内容在页面加载时隐藏并在单击该链接时显示。我也希望该链接消失，或更改为“较少”。

html如下：

<div class="widget-box">
//Text to be shown on page load
<a id="toggle">read more</a>
//Text to be toggled
</div>

小部件框div的内容是使用WordPress文本创建的
小部件。
我想这样做而无需添加额外的html（div和spans）。
客户端需要控制#toggle链接的放置位置。


谢谢你的帮助。

基思

最佳答案

这是small demo入门。有更好的方法可以增强此功能，例如使用text-overflow表示“更多”部分而不是“更多”，或者在“更多”上显示更好的样式；或以其他方式引起人们对“更多”的关注，例如call to action，尽管该链接是一个插件，这对于简单的.toggle()或.show()可能是一项开销

的HTML

<p class="widget-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    <a href="#">read more</a>
    <span> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</p>

的CSS

p span {
    display:none;
}

的JavaScript

$('a').click(function() {
    $(this).next().show();
    return false;
});

关于jquery - 如何使用jQuery阅读更多链接后显示内容？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7038338/