Question

我为网页创建了一个图库标签，可以显示三个缩略图。我的成就是在点击一个名为show-all的类时显示其余的缩略图。为此，我动画我的画廊高度，以显示隐藏的内容。根据功能，一切顺利。但我在这里遇到的问题是当我要使用hide制作超出图库height的{{1}}缩略图时，我仍然可以看到第二行缩略图的某些部分。我只想让它们隐藏起来。下面是我的代码块

HTML

overflow:hidden

Jquery的

<div class="gallery">
     <h3>Photos</h3>
 <a class="see-all" href="javascript:void(0)">See All</a>
    <div class="clear"></div>
    <div class="row">
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
        <div class="col-xs-4">
            <div class="thumbnail">
                <img src="http://placekitten.com/g/150/150">
            </div>
        </div>
    </div>
</div>

任何帮助都将不胜感激。

DEMO

注意：由于我的图片尺寸与以往不一样，因此无法更改图库的高度。

Answer 1

您可以选择显示前3个图像并隐藏其余部分，而不是依赖于图库高度操作......这样您就不会停留在保持图像高度等方面。

当您点击see all时，它会显示其余部分。

JS BIN：http://jsbin.com/qoliqukoye/1/edit?html,js,output

        $(document).ready(function(){
            var x = 0;
            $('.row').children().each(function () {
                if (x >= 3) {
                    $(this).hide();
                }
                x++;
            });
            $(".see-all").click(function(){
                $('.row').children().fadeIn('slow');
            });
        });

enter image description here

Answer 2

所以你可以这样做：在前3个元素上添加一个类，可见的元素并隐藏除那些之外的所有缩略图。那么js应该是这样的：

$('.see-all').click(function(){
  $(this).parents('.gallery').animate({height:'810px'});
  $('.thumbnail').show();
});

请参阅此处的示例：http://jsfiddle.net/wvzyzLo1/1/

如何在点击课堂上显示画廊的图像

2 个答案: