无法在另一个内显示div元素

I have this HTML structure:

我有这个HTML结构:

<div id="wrap_menu">
    <ul class="menu">
        <li><a href="#modelos" class="link">Home</a></li>
        <li><a href="#empresa" class="link">Empresa</a></li>
        <li><a href="#galeria" class="link">Galeria</a></li>
        <li class="big"><a href="#representantes" class="link">Representantes</a></li>
        <li><a href="cadastro" class="link">Cadastro</a></li>
        <li><a href="contato" class="link">Contato</a></li>
    </ul>
</div>

<div id="conteudo">

    <div id="modelos">
        <ul id="fotos_modelo">
            <li><img src="modelos/modelo_1.png"/></li>
            <li><img src="modelos/modelo_2.png"/></li>
            <li><img src="modelos/modelo_3.png"/></li>
        </ul>
    </div>

    <div id="empresa">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p><br/>
        <h4>Aliquam tincidunt mauris eu risus.</h4>
    </div>

</div>

And this JavaScript that make content visible/hidden:

这个使内容可见/隐藏的JavaScript:

$('.menu a').click(function(e) {
    e.preventDefault();
    hideContentDivs();
    var tmp_div = jQuery(this).parent().index();
    jQuery('.menu li').eq(tmp_div).addClass("selected");
    jQuery('#conteudo div').eq(tmp_div).fadeIn(1000);
});         

function hideContentDivs(){
    jQuery('#conteudo div').each(function(){
        jQuery(this).fadeOut();
        jQuery('.menu li').removeClass("selected");
    });
}
hideContentDivs();

My problem: If i put another DIV element inside of my content, example:

我的问题:如果我在我的内容中放入另一个DIV元素,例如:

<div id="modelos">
    <div id="this_div">
        ...
    </div>
</div>

my this_div is not displayed...

我的this_div没有显示......

see: http://jsfiddle.net/hQ7y5/130/

3 个解决方案

#1

Change .main div to .main>div. Then it will hide only the immediate child div

将.main div更改为.main> div。然后它将只隐藏直接的子div

function hideContentDivs() {
    $('.main>div').each(function () {
        $(this).hide();
    });
}

http://jsfiddle.net/hQ7y5/131/

#2

First correction in your jsfiddle is, you have used 'link3' id twice, please correct that. And secondly use :

您的jsfiddle中的第一个更正是,您使用了'link3'id两次,请更正。其次使用:

function hideContentDivs(){
    $('.main>div').each(function(){
    $(this).hide();});
}

working demo : http://jsfiddle.net/hQ7y5/132/

工作演示:http://jsfiddle.net/hQ7y5/132/

#3

function hideContentDivs(){
    jQuery('#conteudo div').each(function(){
        jQuery(this).fadeOut();
        jQuery('.menu li').removeClass("selected");
    });
}
hideContentDivs();

This will hide all the div's within #conteudo (any depth). If you want an immediate child use #conteudo > div

这将隐藏#conteudo(任何深度)内的所有div。如果你想立即使用孩子,请使用#conteudo> div

#1