2

以下のトグル（jsfiddle）を使用して、次のことができるようにしたいと思います。

  1. ループ効果を持たせるには、つまり、トグルを何度でも開閉できるようにします。今のところ、トグルを開いたり閉じたりできるのは 1 回だけです。これは、フェード効果を再度コマンドするための 2 つ目の開いているリンクを取得できないためです。
  2. 同じ記事 (joomla Web サイト) で複数のトグルを呼び出すには。コードを複製して を使用してみましたがheading2、content2成功しませんでした。これが私のコードです:

HTML

<div>
   <span class="heading">This is the beginning of the sentence. </span>
   <span class="content">This is the end of the sentence. </span>
</div>

CSS 

.heading {
   cursor: pointer;
}

JS

jQuery(document).ready(function () {
    jQuery(".content").hide();
    //toggle the componenet with class msg_body
    $('<a href="#" id="read-more-link">[Read More]</a>').appendTo('.heading');
    $('#read-more-link').click(function (e) {
        e.preventDefault();
        $(this).fadeOut();
        $(this).next($(".content").fadeToggle(1000));
    });
    $('<a href="#" id="close-link">[close]</a>').appendTo('.content');
    $('#close-link').click(function (e) {
        e.preventDefault();
        $(this).fadeOut();
        $(this).next($(".content").fadeToggle(1000));
        $('<a href="#" id="read-more-link">[Read More]</a>').appendTo('.heading');

    });
});
4

2 に答える 2

3

これは私がより簡単だと思う例です。DOM からの要素の追加と削除が少なくなります。

http://jsfiddle.net/4Mq3B/

$(document).ready(function () {
    $('.content').after('<a href="#" class="toggle-link">[Read More]</a>');
    $(".content").hide();
    $('.toggle-link').click(function (e) {
        e.preventDefault();
        var $link = $(this);

        if ($link.data('expanded') == true) {
            $link.data('expanded', false);
            $link.text('[Read More]');            
        } else {
            $link.data('expanded', true);
            $link.text('[Close]');
        }

        $link.prev(".content").fadeToggle(1000);
    });    

});
于 2013-07-01T17:22:33.313 に答える
3

1 - 同じページで複数の続きを読む / 閉じるリンクを使用したいので、ID を繰り返すことができないため、ID の代わりにクラスを使用する必要があります。

2- クラスを使用するには、トラバースは現在の要素に対して相対的でなければなりません

アニメーションは改善する必要がありますが、ここに作業バージョンがあります:

jQuery(document).ready(function() {
    jQuery(".content").hide();

    //toggle the componenet with class msg_body
    $('<a href="#" class="read-more">[Read More]</a>')
        .appendTo('.heading'); 

    $('.read-more').on('click', function(e) {
        e.preventDefault();
        $(this).fadeOut();
        $(this).closest('.heading').next(".content").fadeToggle(1000);  
    }); 

    $('<a href="#" class="close-link">[close]</a>').appendTo('.content');

    $('.close-link').on('click', function(e) {
        e.preventDefault();
        $(this).closest('.content').fadeToggle(1000)
            .prev('.heading').find('.read-more').fadeToggle(1000);

    });
});
于 2013-07-01T17:18:17.220 に答える