slideToggle無法正常工作

Question

我對這段代碼有疑問：HTML

       <h2>Lorem ipsum</h2>
       <p>Lorem ipsum dolor sit amet consectetuer ridiculus pellentesque Nunc libero Lorem. Auctor vel eget Donec adipiscing urna ullamcorper tincidunt enim auctor Vivamus. Pede wisi semper Praesent Sed non orci elit Integer dis et. Sed eu diam vitae et nibh eu interdum dui Nulla suscipit. Non tristique id elit at tempor Curabitur malesuada.</p>
       <span class="hidden fullArticle">
         <p>Lorem ipsum dolor sit amet consectetuer felis urna consectetuer Vivamus         sapien. Auctor nibh vel Fusce tortor habitant penatibus mattis hendrerit tincidunt Nullam. Et ac laoreet quis porta Sed adipiscing quis Nulla justo nibh. In ut Vestibulum tortor ligula dolor dis platea quis malesuada Nam. Eget leo augue sociis Sed Curabitur turpis    Nulla condimentum tortor magnis. Cursus suscipit faucibus ipsum sed.</p>
       </span>
       <p class="link"><a href="#">Show full article</a></p>

jquery JavaScript

    $(function() {

  /* hide full articles*/

  $(".hidden").hide();
  $("span.hidden").removeClass("hidden");

  /* showing and hiding of full articles */
  $(".link a").click(function(e) {
    e.preventDefault();
    var anchor = $(this);
    var article = $(this).parent().prev("span");
    article.slideToggle(1000, function(){
      if (anchor.text() == "Show full article")
        anchor.text("Hide article");
      else
        anchor.text("Show full article"); 
    });    
  });  

});

結果應該是當我單擊錨點“顯示完整文章”時，那么使用類fullArticle之前的跨度應該是slideToggle，而錨點中的文本應該更改為“隱藏文章”。

之后當我點擊“隱藏文章”時，它應該再次滑動切換並將文本更改為“顯示完整文章”。

但有些事情是錯誤的，而且工作不正常。 你能給我一些解決方案嗎？ 謝謝您幫忙。 還有jsFiddle http://jsfiddle.net/zYAcB/18/

Answer 1

看看 - http://jsfiddle.net/zYAcB/18/

我編輯了你的javascript：

$(function () {
    /* hide full articles*/

    $(".hidden").hide();

    /* showing and hiding of full articles */
    $(".link a").click(function (e) {
        e.preventDefault();
        var anchor = $(this);
        var article = $(this).parent().prev("div");
        article.slideToggle(1000);
        if (anchor.text() == "Show full article") {
            anchor.text("Hide article");
        } else {
            anchor.text("Show full article");
        }
    });
});

並取出了.hidden { display: none; } .hidden { display: none; }在CSS位。

順便說一句 - 在內聯元素（如<span>像<p>這樣的塊級元素在語義上是不正確的，所以我將其更改為<div> 。

Answer 2

如果只是將<span>元素更改為<div>它可以正常工作

http://jsfiddle.net/zYAcB/30/

Answer 3

您的問題是span是inline ，您需要一個block級元素才能使slide正常工作。 您可以將span設置為display:block或者可以用div替換它。