jQuery 在具有相同类的多个 div 上切换

Question

I am trying to get a jQuery toggle up and running on my site.

So far my code is:

<script>
$(document).ready(function(){
  $(".flip").click(function(){
    $(".flippanel").toggle();
  });
});
</script>

I then in the HTML have:

<p class="flip">Flip it!</p>
<p class="flippanel">This is a paragraph with little content.</p>
<p class="flippanel">This is another small paragraph.</p>
<p class="flip 2">Flip it!</p>
<p class="flippanel 2 ">This is a paragraph with little content.</p>
<p class="flippanel 2">This is another small paragraph.</p>

How do I go about getting it to toggle the two panels independently? Right now, each panel toggles at the same time.

Answer 1

So it looks like you want the flippanel class items to hide themselves when you click "flip it"? I would then recommend you instead put these inside of a div so that when you click on it, the whole div collapses.

That way you can do something like:

$(".flip").click(function(){
  $(this).children().toggle();
});

If you think this is the code for you, but don't like that everything inside of the div is clickable, you can add the following code Additionally, if you think this is the solution for you, you could add the following code which will make it such that only the "Flip it!" part is clickable. I've updated my fiddle below to include this code.

$(".flippanel").click(function( event ) {
  event.stopPropagation();
});

I've made a JSFiddle for you if you click this line to look.

Answer 2

What you need is to use .nextUntil() . It will get every next element until you hit the passed selector.

$(".flip").click(function(){
  $(this).nextUntil('.flip').toggle();
});

Note that the passed selector is excluded from the object.

Answer 3

Select the next two p .flippanel of the one you click each time.

nextAll select all following siblings

slice(0, 2) narrows to the first two

Try:

$(".flip").click(function(){
    $(this).nextAll(".flippanel").slice(0, 2).toggle();
  });

DEMO

Answer 4

$(".flip").click(function(){
      $(this).next().toggle();
      $(this).next().next().toggle();
});

will work.

http://jsfiddle.net/xyqwmzhj/2/

but you really should consider rewriting your html, use the same classes for the content and going with children or something like that.

[edit] if you want it to start closed, add

style="display: none;"

to the div that should be hidden.

full html:

<p class="flip" style="cursor:  pointer;">Flip it!</p>
<div style="display: none;">
<p class="flippanel">This is a paragraph with little content.</p>
<p class="flippanel">This is another small paragraph.</p>
</div>
<p class="flip" style="cursor:  pointer;">Flip it!</p>
<div style="display: none;">
<p class="flippanel">This is a paragraph with little content.</p>
<p class="flippanel">This is another small paragraph.</p>
</div>

Answer 5

Numbers are not valid as html class.

Try it like this:

<p class="flip flip_1">Flip it!</p>
<p class="flippanel flippanel_1">This is a paragraph with little content.</p>
<p class="flippanel flippanel_1">This is another small paragraph.</p>
<p class="flip flip_2">Flip it!</p>
<p class="flippanel flippanel_2 ">This is a paragraph with little content.</p>
<p class="flippanel flippanel_2">This is another small paragraph.</p>

This way your styling eg can attach to the flippanel class and your JS can look like this:

<script>
$(document).ready(function(){
  $(".flip").click(function(){
    $(".flippanel_1").toggle();
  });
});
</script>

Answer 6

I think Your jQuery code is ok for the first flip it! I am suggesting you should create another for the second flip it! And you need to change your second flip it HTML tag classes

From:

<p class="flip 2">Flip it!</p>
<p class="flippanel 2 ">This is a paragraph with little content.</p>
<p class="flippanel 2">This is another small paragraph.</p>

To:

<p class="flip2">Flip it!</p>
<p class="flippanel2 ">This is a paragraph with little content.</p>
<p class="flippanel2">This is another small paragraph.</p>

Then the jQuery codes to add:

$(document).ready(function(){ 
    $(".flip2").click(function(){
        $(". flippanel2").toggle();
    });
});