JQuery toggle only related div closest to it

问题

I have sets of similar divs that I am toggleing with some basic code like this:

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

The issue I am having is that whenever I trigger the "+", it toggles all other divs with the same class when I only want to toggle the related div closest to it .field-group-format-wrapper . I tried .next and .closest but that just seems to lock things up and then it does not work yet I am getting no syntax error e.g.

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

I created a working version here but if you add in .closest as I have above, it does not work anymore.

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

** Note, I only want to show / hide what's in field-group-format-wrapper and nothing else so the "Title" still needs to show whether expanded or not.

回答1:

What you want is siblings(). And use this to refer to the clicked element. You were using closest which looks for the closest() 'parent'.

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

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

回答2:

You could use nextAll() like this:

jsFiddle

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

回答3:

Try using $(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/

Or with siblings:

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

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

回答4:

jQuery

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

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

来源：https://stackoverflow.com/questions/11832405/jquery-toggle-only-related-div-closest-to-it

标签

javascript

jquery

toggle