0

我正在尝试创建一个常见问题解答页面，其中一个问题在单击时变为红色，并且它的答案向下滑动，而所有其他答案向上滑动。所以在任何时候只有一个答案是开放的，只有当它打开时，它的问题才会以红色突出显示。

这可能很容易实现，但我对javascript没有太多经验......到目前为止，如果我点击不同的问题，一切都很好，但是在打开时点击同一个问题将关闭它然后重新打开它：

window.toggle_info = $ ->
  $('.toggle-button').click ->
    $('.toggle-button').removeClass("red-reply") unless $(this).hasClass('red')
    $('.toggle-info').slideUp("slow")
    $(this).next('.toggle-info').slideToggle("slow")
    $(this).toggleClass("red")

我试过用.not('red') .not('.red') :not('red')各种方式$('.toggle-info').slideUp("slow")在线上使用，但它不起作用。

颜色切换在所有情况下都可以正常工作。

谢谢你的时间 ：）

4

2 回答 2

1

这部分：

$('.toggle-info').slideUp("slow")
$(this).next('.toggle-info').slideToggle("slow")

适用slideUp于所有.toggle-info元素，包括$(this).next('.toggle-info'). 因此，您将它们全部关闭，然后单击您刚刚单击slideToggle的.toggle-info以下内容。.toggle-button将slideUp让所有这些都关闭，然后slideToggle将打开.toggle-info您刚刚关闭的。

如果您希望能够通过单击.toggle-button打开的面板来关闭面板，那么您可以这样做：

$next = $(this).next('.toggle-info');
$('.toggle-info').not($next).slideUp("slow")
$next.slideToggle("slow")

该not调用只是从将应用到$next的元素中删除。slideUp如果您想要red唯一的 on open .toggle-buttons，那么您可以执行以下操作：

$next = $(this).next('.toggle-info');
$('.toggle-info')
  .not($next)
  .slideUp("slow")
  .prev('.toggle-button')
  .removeClass('red');
$next.slideToggle("slow")
$(this).toggleClass("red")

演示：http: //jsfiddle.net/ambiguous/TEb2A/1/

我没有看到任何增加.red-reply的内容，所以我没有参加演示；大概你在其他地方有一些代码正在处理那个类。

于 2012-05-31T21:53:07.240 回答
0

我把这个脚本弄乱了很长时间，但当然我在这里发布 5 分钟后得到了答案：/

我将其更改为$(this).next('.toggle-info').slideToggle("slow") unless $(this).hasClass('red-reply')并且可以正常工作。

仍然不确定为什么它以前不起作用...

于 2012-05-31T21:26:39.900 回答