Jquery: Hide all children, then show a specific element

问题

I want to hide all child elements in a div. And then show a specific one passed on to the function.

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

then i call the function from an onmouse event like: subDisplay(#DivIwantToShow); But nothing displays...

What am i doing wrong?

回答1:

You need to hide the children and not the containing div.

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

So now if the div you are trying to show is an element in the parent div it will still show while the others stay hidden.

回答2:

If you're targeting the children of #navSub, you need target them and hide them, rather than the element navSub; which you can do using the children() method;

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

Otherwise, it appears you have multiple elements with the same ID in your DOM, which is not allowed.

You then need to pass a string (which is a valid jQuery selector) to subDisplay();

subDisplay('#DivIwantToShow');

回答3:

To summarize the great comments from @dotweb and @Matt;

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

subDisplay('#DivIwantToShow');

回答4:

if the name of the element is passed in name use this:

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

回答5:

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

回答6:

Try having it outside of the loop, like so:

function subDisplay(name) {

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

     $(name).show();
}

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

回答7:

If you want to hide child div using class.

<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();
    })
})

来源：https://stackoverflow.com/questions/8744404/jquery-hide-all-children-then-show-a-specific-element

标签

javascript

jquery

hide

show