0

このちょっとした jQuery でいくつかのガイダンスを使用できます。これは人気のあるトピックのようです。これまでのところ、クリックすると [もっと読む] または [少なく読む] テキストが変化し、ページ上に複数のインスタンスがある場合、単一のインスタンスが分離して動作します。

ここで行う必要があるのは、Read Less を全文の末尾に追加することです。現時点ではこれが機能していますが、その結果、toggleSlide (上にスライドする) が壊れます。

私は現在jQueryを学んでいます（大好きです！）ので、どんな助けでも大歓迎です。

以下のコード:

$(document).ready(function() {
$('.fulltext').hide();

    $('.blog-item .readmore').click(function(event) {
     event.preventDefault();
        $(this).parent().nextAll('.fulltext').first().slideToggle('slow');
        $(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
        $(this).appendTo($('.fulltext'));
    });            
});

http://jsfiddle.net/Techbot/AuAKn/

4

3 に答える 3

1

あなたが抱えている問題は、スライドの切り替え後に .readmore アンカーを最後に追加していることです。これにより、DOM トラバースの機能が損なわれます。

    $(this).parent().nextAll('.fulltext').first().slideToggle('slow');

私はあなたのフィドルを分岐させ、より簡単な方法を示しました。「続きを読む」アンカーを CSS で配置するだけです。

http://jsfiddle.net/AcQ6s/2/

于 2013-01-25T16:04:54.200 に答える
0

HighParkCoder の回答を少し調整するだけですが、より堅牢であり、各ブログ アイテムの構造を変更することにも耐えられます。代わりに、次の行も更新します。

$(this).closest('.blog-item').find('.fulltext').slideToggle('slow');

$(this)コード内で何度か参照するので、キャッシュする価値もあります。ブログ アイテムの構造を変更することにした場合に JavaScript が機能するように、コードをより一般的なものにすることに慣れておくことは常に価値があります。.parent() の使用は、ブログ アイテムの現在の構造により密接に結びついています。

JSFiddle:

http://jsfiddle.net/D7a6E/3/

于 2013-01-25T16:15:29.893 に答える
-1

あなたはほとんどそれを持っています。ほんの少しの調整。まず、HTML を並べ替えます。

<div class="blog-item">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna ac
        leo vulputate egestas a ut odio. In hac habitasse platea dictumst. Donec
        in erat velit, eu ultricies diam.

    <div class="fulltext">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna ac
            leo vulputate egestas a ut odio. In hac habitasse platea dictumst.</p>
    </div>
    <a class="readmore" href="#">Read more...</a>
    </p>
</div>

次に、クリック時にテキストを切り替えるだけです。

$(document).ready(function () {
    $('.fulltext').hide();

    $('.blog-item .readmore').click(function (event) {
        event.preventDefault();
        $('.fulltext').slideToggle('slow');
        $(this).text($(this).text() == 'Read less...' ? 'Read more...' : 'Read less...');
    });
});

それでうまくいくはずです！ここにフィドルがあります：

http://jsfiddle.net/sablefoste/AuAKn/1/

于 2013-01-25T16:05:38.123 に答える