Question

我有一些类似的div，我正在使用这样的基本代码切换：

 $(".field-group-format-toggler-abstract").click(function()
            {
        $(".field-group-format-wrapper").toggle();
   });

我遇到的问题是，每当我触发“+”时，当我只想切换最接近它的相关div .field-group-format-wrapper时，它会切换具有相同类的所有其他div。我尝试了.next和.closest，但这似乎只是把事情搞砸了然后它不起作用我没有语法错误，例如。

$(".field-group-format-toggler-abstract").click(function()
                {
            $(".field-group-format-wrapper").closest().toggle();
       });

我在这里创建了一个工作版本，但如果你像我上面那样添加.closest，它就不再起作用了。

http://jsfiddle.net/LHguJ/5/

**请注意，我只想显示/隐藏field-group-format-wrapper中的内容，而不是其他内容，因此“标题”仍然需要显示是否展开。

Answer 1

你想要的是siblings()。并使用它来引用被点击的元素。你正在使用最接近closest()'父母'的人。

$(".field-group-format-toggler-abstract").click(function() {
    $(this).siblings(".field-group-format-wrapper").toggle();
});

http://jsfiddle.net/LHguJ/11/

Answer 2

您可以像这样使用nextAll()：

jsFiddle

$(".field-group-format-toggler-abstract").click(function(){
    $(this).nextAll(".field-group-format-wrapper").toggle();
});

Answer 3

的jQuery

$(".field-group-format-toggler-abstract").click(function(){
    $(this).siblings(".field-group-format-wrapper").toggle();
    $(this).html( $(this).html() == '+' ? '–' : '+');
});

http://jsfiddle.net/iambriansreed/JLj2X/

Answer 4

尝试使用$(this).parent().find(".field-group-format-wrapper")

$(".field-group-format-toggler-abstract").click(function() {
    $(this).parent().find(".field-group-format-wrapper").toggle();
});

http://jsfiddle.net/LHguJ/12/

或siblings：

$(".field-group-format-toggler-abstract").click(function() {
    $(this).siblings(".field-group-format-wrapper").toggle();
});

http://jsfiddle.net/LHguJ/13/

JQuery只切换最接近它的相关div

4 个答案: