jquery - 第 n 个 child 高度属性的问题

Question

这是我的 CSS 代码。

    .filteredDocContent {
      display: none;
    }
    .filteredDocContent .photography:nth-child(1),
    .filteredDocContent .photography:nth-child(2),
    .filteredDocContent .photography:nth-child(3),
    .filteredDocContent .photography:nth-child(4),
    .filteredDocContent .photography:nth-child(5),
    .filteredDocContent .photography:nth-child(6),
    .filteredDocContent .photography:nth-child(7),
    .filteredDocContent .photography:nth-child(8) {
      display: block;
    }

我在这里做什么-

总共有 15 个文档或更多(它将根据用户插入或上传数据来)，最初只显示第 1 个 8 个文档。但它占用所有文档的高度，并且比加载更多的按钮出现。

这是我的 div 当文档显示时:-

<div id="lightbox" class="row filteredDocContent">
    <?php foreach ( $aDoc as $oDoc ) { ?>
    <div class="col-sm-6 col-md-3 col-lg-3 photography app" id="load_data">
        <div class="portfolio-item" style="margin-top:-12px;">
            <!-- <div class="hover-bg"> -->
            <div class="">
                <?php $sDocName=$ oDoc[ 'docPath']; ?>
                <a href="<?php echo base_url() ?>front/home/downloadFile/?name=<?php echo $sDocName; ?>">
                <div class="hover-text" data-toggle="tooltip" data-placement="right" title="<?php echo $oDoc[ 'docSubject' ];?>">
                    <h4>  <?php echo substr($oDoc[ 'docSubject' ],0,20);?> </h4>
                </div>    
                <?php
                if( ! empty( $oDoc[ 'docThumb' ] ) )
                {
                    $thumbName = $oDoc[ 'docThumb' ];
                }
                else
                {
                    $thumbName = "assets/processedInfo/common.jpg";
                }
                ?>
                <img style="height:188px;width : 263px"
                src="<?php echo base_url () . $thumbName ?>" class="docThumb img-responsive"
                alt="<?php echo $oDoc[ 'docSubject' ];?>">
                </a>
            </div>
            <div>Uploaded By : <span data-toggle="tooltip" data-placement="right" title="<?php echo $oDoc[ 'userName' ];?>"> <?php echo substr($oDoc[ 'userName' ],0,20);?> </span>
            </div>
            <div>HQ : <span data-toggle="tooltip" data-placement="right" title="<?php echo @$oDoc[ 'hq' ];?>">  <?php echo substr(@$oDoc[ 'hq' ],0,20);?> </span>
            </div>
            <div>Subject : <span data-toggle="tooltip" data-placement="right" title="<?php echo $oDoc[ 'docSubject' ];?>">  <?php echo substr($oDoc[ 'docSubject' ],0,20);?> </span>
            </div>
        </div>
    </div>
    <?php } ?>
</div>
<?php if(count($aDoc)>8){ ?>
<button id="show_All" class="btn tf-btn btn-default pull-right">Load More</button>
<?php } ?>
</div>

这是我点击加载更多按钮的代码

$('#show_All').on('click', function(e){
    e.preventDefault();
    $('.filteredDocContent .photography').filter(':hidden').show();
    $('#show_All').hide();
});

Answer 1

更改 .filteredDocContent 上的第一条规则以应用于它的子项，而不是它本身:

.filteredDocContent .photography{
     display: none;
}

按照上述操作，您首先要确保 .photography 元素中的没有被呈现为 block ，因此不会占用其父元素中的任何空间。

JSFiddle Demo