显示/隐藏儿童单击

Question

我想孩子显示/隐藏当点击父

HTML

<div id="a" class="childshow">Parent 
     <div id="b" class="childshow" style="display:none">Child 
      <div id="c" class="childshow" style="display:none">inner child 
      </div> 
      <div id="c1" class="childshow" style="display:none">inner child1 
      </div>  
    </div> 
</div> 

JQUERY

$(".childshow").click(function() { 
    if(jQuery(this).find('>.childshow').css("display")=="none"){ 
     $(this).find('>.childshow').show(); 
    }else{ 
     $(this).find('>.childshow').hide(); 
    } 
}); 

，但这不能正常工作

Answer 1

你可以使用toggle()，而不是从冒泡停止活动，顺便说一句，你应该使用.children()：

DEMO jsFiddle

$(".childshow").click(function (e) { 
    e.stopPropagation(); 
    jQuery(this).children('.childshow').toggle(); 
}); 

Answer 2

在这里你去

$(".childshow").click(function (e) { 
    e.stopPropagation(); //to stop event bubbling 
    if ($(this).children('.childshow').is(':visible')) { //check if hidden or not 
     $(this).children('.childshow').hide(); //if yes hide 

    } else { 

     $(this).children('.childshow').show(); // else show 
    } 
}); 

或使用toggle()代替show和hide

$(".childshow").click(function (e) { 
    e.stopPropagation(); 
    $(this).children('.childshow').toggle(); 
}); 

fiddle here