javascript - 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 的同级。所以 next() 不会找到它。但是，如果您备份到切换 div 的父级，则内容 div 是同级，因此 next() 将找到它......

根据标记的其余部分，选择器可能需要进一步更改，但这是整个函数的主要问题。

似乎可以与固定的选择器一起工作，并且实际上包含 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