jquery - jQuery.hide() 隐藏，但 .show() 不显示它们

Question

我有一个内部div#content有 3div的 ( product-a-content,product-b-content和product-c-content) 并且每个都有一些子元素。在任何时候，只有一个 3 divs 应该是可见的。更改活动的代码div是这样的：

    $('.mainmenuitem').click(function(){
        $('#content div').hide();
        $('#content div#' + this.id + '-content').show();
    });

和标记：

<div id="mainmenu">
    <div id="product-a" class="mainmenuitem"></div>
    <div id="product-b" class="mainmenuitem"></div>
    <div id="product-c" class="mainmenuitem"></div>
    <div style="clear: both;"></div>
</div>
<div id="content" class="box">
        <div id="product-a-content"><?php echo $product_a_info; ?></div>
        <div id="product-b-content"><?php echo $product_b_info; ?></div>
        <div id="product-c-content"><?php echo $product_c_info; ?></div>
</div>

它们变为hide，但不活跃，然后不能活跃。（我什至确定该权利id已恢复为可见）。

Answer 1

$('#content div')隐藏所有div内部#content，甚至#content元素的间接子级，当您将其显示回来时，您仅显示直接子级 div。

隐藏元素时，只需要隐藏直接的 div

尝试

$('.mainmenuitem').click(function(){
    $('#content > div').hide();
    $('#' + this.id + '-content').show();
});