jQuery的切換：循環效應+多重切換

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); 
    });  

}); 

Answer 2

1 - 由於您想在同一頁面上使用多個閱讀更多/關閉鏈接，因此您必須使用類而不是id，因爲您不能重複id。

2-使用類，穿越必須是相對於當前元素

的動畫將還有待提高，但here's a working version：

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); 

    }); 
});