使用 jQuery 切换内容

Toggle content with jQuery

本文关键字：jQuery 使用      更新时间：2023-09-26

我有一个链接"显示更多..."。当我单击它时，我会切换带有详细信息的div 的可见性。我想知道是否有一种简单漂亮的方法来切换"显示更多..."之间的链接内容和div 切换发生时"隐藏详细信息"？

如果你只想切换文本，这里有一个简单的例子，jQuery中基于使用SPAN作为标签。

$('#SpanLabel').html($('SpanLabel').text() == 'Show More...' ? 'Hide details' : 'Show More...');

使用 html 5http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_summary

我以前用过这个，并取得了一些成功：

http://plugins.learningjquery.com/expander/index.html

您可以使用

CSS 规则更改显示的内容： http://jsfiddle.net/8G6fm/

我想优点是如果您想进一步设置样式，您可以添加到样式中(例如，使用指向左/向下的箭头的背景图像，具体取决于它是否打开(。

相关文章：