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个或以上的文件（根据用户插入或上传数据而来），并且最初仅显示前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元素的 none 呈现为块，因此不会占用其父级中的任何空间。

JSFiddle Demo

第n个子高度属性

1 个答案: