如何在一页JQuery上使用多个切换？

Question

How can use multiple toggle on one page?
I have two div in my HTML file and I want to hide or remove the child-1 div and then replace with another div child-2 when every time that clicking on parent title.
my HTML structure as below:

 $(document).ready(function(){ $('.child_1').show(); $('.child_2').hide(); $('.parent').click( function() { $(this).each( function() { $('.child_1, .child_2').toggle(); }); }); }); 

 .child_1, .child_2 { background-color: red; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <h2>Title One</h2> <div class='child_1'>paragraph 1</div> <div class='child_2'>paragraph 2</div> </div> <div class="parent"> <h2>Title Two</h2> <div class='child_1'>paragraph 1</div> <div class='child_2'>paragraph 2</div> </div> 

This work perfectly but when I click in one element other element also change.

Please see here: JSFiddle .

Answer 1

Bug in your code:

The following code calls .toggle() on every instance of $('parent') thus applying the .click() logic to all .parent elements rather than just the clicked one:

$('.parent').click( function() {
    $(this).each( function() {
      $('.child_1, .child_2').toggle();
    });
  });

In order to fix this problem one could rewrite it as follows:

  $('.parent').click( function() {
    $(this).children('div').toggle('.child_1, .child_2');
  });

---

Suggested approach:

The best way to approach this is by using .toggleClass() on the .parent element when clicked.

The class when present will dictate the state of specified children - when class show is active on .parent show .child_2 and when not show child_1 . This way you set one state as the initial view avoiding the need to .hide() it on load.

It's best practice to control visual states with css when possible (ie class with display: none and/or display: block ) and dictating the styles of contained elements based on the parent element's state/class.

 $(document).ready(function(){ $('.parent').click( function() { $(this).toggleClass('show'); }); }); 

 .child_1, .show .child_2 { display: block; } .child_2, .show .child_1 { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <h2>Title</h2> <div class='child_1'>paragraph 1</div> <div class='child_2'>paragraph 2</div> </div> <div class="parent"> <h2>Title</h2> <div class='child_1'>paragraph 1</div> <div class='child_2'>paragraph 2</div> </div> 

Answer 2

just change your js function slightly:

 $(document).ready(function(){ $('.child_1').show(); $('.child_2').hide(); $('.parent').click( function() { $(this).each( function() { $('.child_1, .child_2',this).toggle(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <h2>Title One</h2> <div class='child_1'>paragraph 1</div> <div class='child_2'>paragraph 2</div> </div> <div class="parent"> <h2>Title Two</h2> <div class='child_1'>paragraph 1</div> <div class='child_2'>paragraph 2</div> </div> 

Answer 3

Just toggle the div children.

$(function(){ 
  $('.parent').click( function() {
    $(this).children("div").toggle();
  });
});

http://jsfiddle.net/jakecigar/cc3bmxx8/18/ <--