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();

向上/向下滑动

e.g。

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

以下是演示：http://jsfiddle.net/7aVkx/1/

Answer 2

不要多次附加click处理程序，而是使用slideToggle()

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

Answer 3

你可以做live click绑定。当您在加载后将该类添加到段落时，它将找不到对它的引用。

$(".traversed").live("click",function(){});

你有没有理由改变课程？一个替代方案可能是使用slideToggle()并让该课程独自完成。

Answer 4

您必须使用.live，因为您（在您的点击处理程序中）不断添加/删除用于选择要处理的元素的类。只做：

$(".traverse").click(....)

不会“跟踪”可能具有“遍历”类的未来元素。如果您将使用它，它应该可以正常工作：

$(".traverse").live("click", ....)

Answer 5

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

Answer 6

您要在类.traversed的所有元素上设置处理程序，但当时your desired elements don't have that class。

改为使用.live：*

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

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

Live demo.

^{*“ 说明：为现在和将来与当前选择器匹配的所有元素附加事件处理程序。”}

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

6 个答案: