Question

我有这个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>

这个使内容可见/隐藏的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();

我的问题：如果我在我的内容中添加了另一个DIV元素，例如：

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

我的this_div未显示...

请参阅：http://jsfiddle.net/hQ7y5/130/

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

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

这将隐藏#conteudo（任何深度）内的所有div。如果您想立即使用儿童#conteudo > div

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

3 个答案: