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（）不会找到它。但是如果你备份到toggle 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

FadeToggle更改文本并显示

1 个答案: