Question

我不知道我的代码有什么问题：

$(document).ready(function(){

var adjustheight = 80;
var moreText = "+ read more";
var lessText = "- less text";

$("div.posted_post .more-block").css('height', adjustheight).css('overflow', 'hidden');
$("div.posted_post").append('[...]');

$("a.show").text(moreText);

$(".show").toggle(function()
    {
        $(this).find(".more-block").css('height', 'auto').css('overflow', 'visible');
        $(this).text(lessText);
    }, function(){
        $(this).find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
        $(this).text(moreText);
    });
});

html看起来像这样：

<div class="posted_post">
    <div class="more-block">
        <p>The Content</p>
            <a class="show"></a>
    </div>
</div>

当我加载页面时，显示更多按钮，但是在一秒钟内隐藏了什么错误？

Answer 1

您实际上并没有创建按钮。你需要做

$('<a class="show"/>').text(moreText).appendTo('.posted_post').

如果你有多个帖子，你需要循环它们以创建更多的链接。例如：

$("div.posted_post").each(function () {
     // create more links and set CSS.

Answer 2

您尝试使用的切换已在jQuery 1.9中删除（自1.8以来已弃用）

请参阅http://api.jquery.com/toggle-event/

因此，通过调用切换，您实际上是在切换元素（如果您使用的是jq1.9）

BTW：

$(this).find(".more-block")

不会返回任何内容。

应该是：

$(this).closest(".more-block")

您可以尝试这样的事情：

$(document).ready(function(){

var adjustheight = 80;
var moreText = "+ read more";
var lessText = "- less text";

$("div.posted_post .more-block").css('height', adjustheight).css('overflow', 'hidden');
$("div.posted_post").append('[...]');

$("a.show").text(moreText);

$(".show").click(function()
    {
        if($(this).text()===lessText)
        {
            $(this).closest(".more-block").css('height', adjustheight).css('overflow', 'hidden');
            $(this).text(moreText);
        }
        else
        {
            $(this).closest(".more-block").css('height', 'auto').css('overflow', 'visible');
            $(this).text(lessText);
        }
    });
});

阅读更多/阅读更少

2 个答案: