jquery - p标签会向下滑动但不会向上滑动

Question

有一个问答系统，其中答案开始是隐藏的，然后当单击问题时，答案会向下滑动。这工作正常，但我希望这样，如果再次单击问题，答案就会滑回来。目前它只是忽略该命令。删除/添加类正在工作，所以我想不出它还能是什么？

HTML: <h2 class="traverse">What subjects are covered in the Core Knowledge Sequence UK?</h2> <p class="traversing">The Core Knowledge Sequence UK is a guideline of the fundamental skills and content to cover in English, maths, history and geography, science, music and visual arts.</p>

Jquery:

$(".traverse").click(function(){
            $(this).next("p.traversing").slideDown();
            $(this).removeClass('traverse');
            $(this).addClass('traversed');
        });

$(".traversed").click(function(){
            $(this).next("p.traversing").slideUp();
            $(this).removeClass('traversed');
            $(this).addClass('traverse');
        });

Answer 1

技巧是你在用户操作上添加遍历的类...在你将事件处理程序附加到所有使用 jQuery 的匹配之后(因此新元素不会被捕获)

我建议改变方法。对可以切换的元素保留一个类，然后根据需要使用 .toggle(); 向上/向下滑动

例如

$('.collapsible').toggle(function(){
    $(this).next('p.traversing').slideUp();
  }, function(){
    $(this).next('p.traversing').slideDown();
  }
);

这是一个演示:http://jsfiddle.net/7aVkx/1/