Question

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

我特意想要完成什么？单击.toggle时，选择div切换，而不是一次切换所有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＆＃39; s $(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();
    });
});

请注意，如果使用$(this)和.each()通过使用类名而非ID来向他们提供div，则您甚至可以在div淡入时改进该部分。

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

只有1个div切换而不是全部

2 个答案:

DEMO