只有 1 div 切换而不是全部

Question

运行尝试只有 1 个 div 切换而不是全部切换的问题。我试过使用 next() 并将选择器设置为 children 而不是父元素，但它根本不会打开。

我的具体目标是什么？单击 .toggle 时切换选定的 div，而不是一次切换所有这些。

var c1 = $("#o");
var c2 = $("#t");
var c3 = $("#th");
$(document).ready(function () {
    $(c1).hide(0).delay(500).fadeIn(1500);
    $(c2).hide(0).delay(1500).fadeIn(1500);
    $(c3).hide(0).delay(2500).fadeIn(1500);
});
var content = $("#main .column .body");
$(content).hide();
var t1 = $(".toggle");
$(t1).click(function () {
    $(content).slideToggle('slow');
    $(t1).toggleClass("toggle");
    $(t1).toggleClass("toggle-d");
});

Answer 1

尝试使用this对象遍历到需要的节点，

$(t1).click(function () {
   $(this).toggleClass("toggle")
          .toggleClass("toggle-d")
          .parent().next('.body').slideToggle('slow');
});

DEMO

Answer 2

jQuery 的 $(this) 允许您将效果应用到当前元素。这是您的代码的正确、更短和更简单的版本：

 $(document).ready(function () {
    $(".column, .body").hide(); // you should put this in your CSS ( .column, .body { display: none; } )

    $(".column").each(function(index) {
        $(this).delay(400*index).fadeIn(300);
    });

    $(".toggle").click(function () {
        $(this).toggleClass("toggle").toggleClass("toggle-d").parent().next(".body").slideToggle();
    });
});

请注意，当您的 div 淡入时，您可以如何改进这一部分，方法是使用 $(this) 和 .each() 用 class 名称而不是 id 引用它们。

我认为 w3schools 很好地解释了 $(this)。

只有 1 div 切换而不是全部

Have only 1 div toggle instead of all

javascript

jquery

slidetoggle

DEMO