Question

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

这可能很容易实现，但我没有太多的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")，但它无效。

在所有情况下，颜色切换都正常。

感谢您的时间：）

Answer 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上使用.toggle-button，那么您可以执行以下操作：

$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的内容，所以我已经离开了演示;可能你在其他地方有一些代码正在用这个类做事。

Answer 2

我把这个剧本弄乱了很久但当然我在帖子发布后5分钟得到答案：/

我将其更改为$(this).next('.toggle-info').slideToggle("slow") unless $(this).hasClass('red-reply')并且有效。

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

jQuery + CoffeeScript，slideToggle只隐藏然后再显示

2 个答案: