0

トグルをクリックすると、コードがすべての div のクラスをターゲットにしているため、すべての div が展開されます。関連する div のみを対象とするように変更するのに十分なほど jQuery を理解していません。

Javascript

$(function () {
    // The height of the content block when it's not expanded
    var postadjustheight = 340;
    // The "more" link text
    var postmoreText = "Click to Expand Post";
    // The "less" link text
    var postlessText = "Click to Condense Post";

    // Sets the .more-block div to the specified height and hides any content that overflows
    $("body.page-template-page_blog-php #content .post .entry-content").css('height', postadjustheight).css('overflow', 'hidden');

    // The section added to the bottom of the "more-less" div
    $("body.page-template-page_blog-php .entry-content").prepend('<a href="#" class="adjust"></a>');

    $("body.page-template-page_blog-php #content .post .adjust").toggle(function () {
        $("body.page-template-page_blog-php #content .post .entry-content").css('height', 'auto').css('overflow', 'visible');
        $(this).text(postlessText);
    }, function () {
        $("body.page-template-page_blog-php #content .post .entry-content").css('height', postadjustheight).css('overflow', 'hidden');
        $(this).text(postmoreText);
    });
});

HTML

    <div id="content">
    <div class="post">
        <div class="entry-content"><a class="adjust" href="#">Click to Expand Post</a>
            <p>Post Contents</p>
        </div>
    </div>
    </div>
4

1 に答える 1

0

jQuery を知らないことは、jQuery を学ぶための最初のステップです。

このライブラリhttp://plugins.learningjquery.com/expander/ を含めると、トグルに応じて必要な特定のクラスを展開/縮小できるはずです。

于 2013-01-21T17:27:05.783 に答える