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/を参照してください

したがって、toggle を呼び出すことで、実際に要素を切り替えています (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 に答える