1

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

$(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>

当我加载页面时，显示更多按钮被显示，但在一秒钟内它被隐藏这里有什么问题？

4

2 回答 2

1

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

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

但是，如果您有多个帖子，则需要遍历它们以创建更多链接。例如：

$("div.posted_post").each(function () {
     // create more links and set CSS.
于 2013-02-19T10:24:16.583 回答
1

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

见http://api.jquery.com/toggle-event/

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

顺便提一句 ：

$(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);
        }
    });
});
于 2013-02-19T10:48:33.807 回答