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

在父母点击上显示/隐藏孩子

2 个答案: