代码之家 › 专栏 › 技术社区 › user5278424

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

slidetoggle jquery javascript

user5278424 · 技术社区 · 9 年前

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

我具体想完成什么? 当 .toggle 而不是一次切换所有选项。

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");
});

2 回复 | 直到 9 年前

Rajaprabhu Aravindasamy 9 年前

尝试使用 this 对象并遍历到所需节点,

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

DEMO

BlaÅ¾ ZupanÄiÄ 9 年前

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淡出时,您甚至可以通过使用 $(这个) 和 .each() .

我想 w3schools 解释 $(这个) 非常好。