5

作成したループに少し問題があります。jQueryを使ってループを構築しようとしたのは初めてです。シンプルな続きを読む/少なくするボタンです。

私が抱えている問題は奇妙なものです。ページが最初に読み込まれたときは完全に機能しますが、その後はいつでも、ID の変更を考慮せずにすべてを実行します。

HTML:

<div class="inner_container" id="tag_info"><?php?></div>
<a id="read_more">read more ></a>

jQuery:

$('a#read_more').click(function() {
    $('#tag_info').stop().animate({
        height: '100%'
        }, 500 );
    $(this).text('< read less');
    $(this).removeAttr('id');
    $(this).attr('id', 'read_less');
        $('a#read_less').click(function() {
            $('#tag_info').stop().animate({
                height: '50px'
                }, 500 );
            $(this).text('read more >');
            $(this).removeAttr('id');
            $(this).attr('id', 'read_more');
        });
});

CSS: [アンカー スタイルは不要]

#tag_info {
height: 50px;
overflow: hidden;
}

何が起こるか (初回以降はいつでも)、div は最初のクリック関数で設定された高さに即座にアニメーション化し、2 番目のクリック関数で設定された高さに戻ります。

それらを 2 つの異なるクリック機能に分けると、2 番目のクリック機能が機能しません。最も紛らわしいのは、一度機能すると、正しく機能しなくなることです。助言がありますか？

4

5 に答える 5

2

シンプルなトグル機能でできること:

$('#read_more').on('click', function() {
    var state = $(this).text() == 'read more >';
    $('#tag_info').stop().animate({
        height: (state ? '100%' : '50px')}, 500 );
    $(this).text(state ?'< read less' : 'read more >');
});

補足として、パーセンテージとピクセルの両方で値をアニメーション化すると、問題が発生することがあります。

フィドル

于 2013-06-21T13:42:21.183 に答える
0

クリック ハンドラーに別のハンドラーを同じ要素に追加しているため、問題が発生しています。

$('a#read_less').click(function () {
    $('#tag_info').stop().animate({
        height: '50px'
    }, 500);
    $(this).text('read more >');
    $(this).removeAttr('id');
    $(this).attr('id', 'read_more');
});

これを試してください（http://jsfiddle.net/balintbako/nc5Dp/）：

$('#read_more').click(function () {
    if ($(this).hasClass("more")) {
        $('#tag_info').stop().animate({
            height: '100%'
        }, 500);
        $(this).text('< read less');
    } else {
        $('#tag_info').stop().animate({
            height: '50px'
        }, 500);
        $(this).text('read more >');
    }
    $(this).toggleClass("more");
});
于 2013-06-21T13:40:03.997 に答える