Jquery:隐藏所有子项,然后显示特定元素

时间:2012-01-05 14:47:41

标签: javascript jquery hide show

我想隐藏div中的所有子元素。 然后显示传递给函数的特定一个。

function subDisplay(name) {
   $("#navSub").each(function() {
      $(this).hide();
   });
   $(name).show();
}

然后我从onmouse事件调用该函数,如:subDisplay(#DivIwantToShow); 但没有任何显示......

我做错了什么?

7 个答案:

答案 0 :(得分:76)

你需要隐藏孩子,而不是隐藏div。

$("#navSub").children().hide();

所以现在如果你想要显示的div是父div中的一个元素,它仍将显示,而其他div保持隐藏。

答案 1 :(得分:3)

如果您定位#navSub的孩子,则需要定位他们并隐藏他们,而不是元素navSub;您可以使用children()方法执行此操作;

function subDisplay(name) {
    $('#navSub').children().hide();
    $(name).show();
};

否则,您的DOM中有多个具有相同ID的元素,这是不允许的。

然后,您需要将一个字符串(有效的jQuery选择器)传递给subDisplay();

subDisplay('#DivIwantToShow');

答案 2 :(得分:1)

总结@dotweb和@Matt的好评;

function subDisplay(name) {
   $('#navSub').hide();
   $(name).show();
}

subDisplay('#DivIwantToShow');

答案 3 :(得分:1)

如果在名称中传递元素的名称,请使用:

    if($(this).attr('name') != name){
    //Hide it
    } else {
   //show it
}

答案 4 :(得分:0)

function subDisplay(name) {
   $("#navSub").hide();
   $('#'+name).show();
}

答案 5 :(得分:0)

尝试在循环之外使用它,如下所示:

function subDisplay(name) {

     $("#navSub").hide();

     $(name).show();
}

http://jsfiddle.net/peduarte/m2pj8/

答案 6 :(得分:0)

如果您想使用 class 隐藏子div

<div class="parent_div">
    <div class="child_div">1st div</div>
    <div class="child_div">2nd div</div>
</div>

$(document).ready(function(){
    $(".parent_div").on('click',function(){
        $j(this).find("div").toggle();
    })
})