Question

我正在尝试为我的元素添加切换效果。

它正确切换，但没有效果。效果只显示div吗？这是我的代码：

$(".toggler").click(function(event) {
  var clickedElement = $(event.target);
  $(clickedElement).parent().parent().next("tr").find("td").toggle("slow", 1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="details" style="display: none;" colspan="6">
  <p>This is an example column...</p>
  <p>This is an example column...</p>
</td>


<table class="table table-responsive">
  <tbody>
    <tr>
      <th><a class="toggler">First</a></th>
      <th><a class="toggler">Second</a></th>
      <th><a class="toggler">Third</a></th>
    </tr>
  </tbody>
</table>

先谢谢

Answer 1

jQuery toggle()的参数是speed，easing和callback。您试图在第一个参数和第二个参数中传递速度。它应该是toggle(1000);或toggle("slow");。

Answer 2

您可以使用jQuery UI进行扩展切换效果选项：https://jqueryui.com/toggle/

对于简单的淡入淡出，请尝试使用包含在基本jQuery库中的.fadeToggle（）：http://api.jquery.com/fadetoggle/

Answer 3

哦，我的错误是，我在bootstrap cdn中使用了一个简洁的JQuery版本。

使用正常修复它。

JQuery - Toggle Effect无法正常工作

3 个答案: