FadeToggle更改文本並顯示

Question

我試圖讓淡入淡出的切換工作。當你點擊（+）兩個時，它應該顯示兩個鏈接並更改爲（ - ）兩個，當你再次按下時，它會關閉這些鏈接並返回（+）兩個。現在，當你按下切換按鈕時，我無法得到任何事情發生。

<div id="ending"> 
    An everyday snapshot of 
    <div class="toggle"><span style="font-size:11px">(+) </span>two </div> sfsfs 



</div> 

<div class="content"> 
    <a href="http://sfs.co.nz/" target="_blank">sfs</a> & <a href="http://sfsfs.co.nz/" target="_blank">sfsf</a> 

</div> 


$(document).ready(function() { 
    $(".content").hide(); 
    $(".toggle").on("click", function() { 
    var txt = $(".content").is(':visible') ? '(+) two' : '(-) two'; 
    $(".toggle").text(txt); 
    $(".toggle").toggleClass('active'); 
    $(this).next('.content').slideToggle(450); 
    e.stopPropagation(); 
    }); 
}); 

https://jsfiddle.net/Dar_T/b5tbfn5g/

Answer 1

1）你確實有引用/包括jQuery庫jQuery的職能工作。

2）你有一個不正確的選擇器。

• 不是$(this).next('.content').slideToggle(450);
  只是用$('.content').slideToggle(450);或
  $(this).parent().next('.content').slideToggle(450);

內容DIV是不切換DIV的兄弟..所以未來（）是不會找到它。但是，如果你備份到撥動div的父母，則內容DIV 爲兄弟姐妹，所以未來（）將發現它.....

根據標記的休息，選擇器可能需要進一步修改，但這是總體功能的主要問題。

似乎與選擇固定和jQuery庫實際上包括在一起。

$(document).ready(function() { 
     $(".content").hide(); 
     $(".toggle").on("click", function() { 
     var txt = $(".content").is(':visible') ? '(+) two' : '(-) two'; 
     $(".toggle").text(txt); 
     $(".toggle").toggleClass('active'); 
     $(this).parent().next('.content').slideToggle(450); 
     e.stopPropagation(); 
     }); 
    }); 

Updated Fiddle