Question

我在table上调用淡入淡出，其中包含几个较小的div。整个架构归结为：

<div id="resources" class="no-select">
    <h1 class="sectionTitle">Resources</h1>
    <table id="resourceGrid" class="pointer">

        <tr id='tierIResources'>
        </tr>

        <tr id="tierIIResources">
        </tr>

    </table>
</div>

CSS归结为此

tr#tierIIResources, div#resources, {
     display: none;
}

当我在.fadeIn()上致电$('#resources')时，它最终会同时显示tierI和tierII资源。我想这样做只显示tierI。我可以通过调用('#tierIIResources').css('display', 'none)来解决这个问题，但这不是最佳选择，我想知道如何使用CSS完成它，或者不需要额外的功能。

谢谢！

Answer 1

我已经尝试过这段代码并且工作正常。

＆＃13;

    $(document).ready(function(){
    $("#resources").fadeIn();
    });

＆＃13;

 #tierIIResources, #resources {
         display: none;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div id="resources" class="no-select">
        <h1 class="sectionTitle">Resources</h1>
        <table id="resourceGrid" class="pointer">
    
            <tr id='tierIResources'>
              <td>tierIResources</td>
            </tr>
    
            <tr id="tierIIResources">
              <td>tierIIResources</td>
            </tr>
    
        </table>
    </div>

＆＃13;

这是一个有效的代码链接。

Example codepen

Answer 2

你的帖子中有一个拼写错误，或者我认为直到我发现这是问题，你发布了

tr#tierIIResources, div#resources, {
     display: none;
}

最后用exta逗号，但它不像逗号不应该在那里，你错过了tr#tierIResourcesf来自那个选择器，它应该是：

tr#tierIIResources, div#resources, tr#tierIResourcesf{
    display: none;
}

然后它会工作。让我知道

＆＃13;

$('#resources').fadeIn();

＆＃13;

tr#tierIIResources, div#resources, tr#tierIResourcesf{
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resources" class="no-select">
            <h1 class="sectionTitle">Resources</h1>
            <table id="resourceGrid" class="pointer">
                <tbody>
                    <tr id="tierIIResources"><td>d</td>
                    </tr>

                    <tr id='tierIResourcesf'><td>a</td>
                    </tr>
                </tbody>
            </table>
        </div>

＆＃13;

jQuery fadeIn在一个表上，导致我想要隐藏的行显示

2 个答案: