jquery切换: loop effect + multiple toggles

Question

通过下面的切换按钮 ( jsfiddle )，我希望能够执行以下操作:

1. 要有循环效果，即能够根据需要多次打开和关闭切换开关。目前，我只能打开和关闭切换一次，因为我无法获得第二个打开的链接来再次命令淡入淡出效果。
2. 在同一篇文章(joomla 网站)上调用多个切换。我尝试复制代码并使用 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');

    });
});

Answer 1

这是一个我认为更简单的例子。它在 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);
    });    

});