Question

我无法通过此切换来阅读更多或更少的幻灯片切换功能。我非常接近，但我不确定如何显示#show-about锚点，以便首先显示"read more"？

$('#show-about').click(function(e){
e.preventDefault();
$('#about-hidden').slideToggle();
$(this).text( $(this).text() == 'Read More' ? "Show Less" : "Read More");
});

Answer 1

变化：

<a href="#" id="show-about">More...</a>

为：

<a href="#" id="show-about">Read More</a>

<强> jsFiddle example

您的问题似乎源于$(this).text() == 'Read More' ? "Show Less" : "Read More"，而您的链接的文字为More...。当您点击该链接时，$(this).text()等于More...，但您要将其与Read More进行比较，因此请更改链接以匹配该内容，您就可以了。

Answer 2

只需更改标记中的原始文字即可。

<a href="#" id="show-about">Read More</a>

http://jsfiddle.net/xhLU7/4/

Answer 3

您可以使用jQuery执行此操作，如：

<强> JS

$('#show-about')
    .text('Read More')
    .click(function (e) {
         e.preventDefault();
         $('#about-hidden').slideToggle();
         $(this).text($(this).text() == 'Read More' ? "Show Less" : "Read More");
});

演示：Fiddle

但是，如果您可以修改HTML标记并完全访问它，您可以这样做：

<强> HTML

<a href="#" id="show-about">Read More</a>

Answer 4

为什么你不写锚定“Read More”而不是“More ...”？

阅读更多/更少幻灯片切换问题？

4 个答案: