Question

我有一组<li>个元素，其中我有<div>个类expander。

当单击列表项时，前3个中的扩展器会在列表项下面向下移动，这很好但是当您单击第4个选项时，扩展器将在其上面作为新行上的。

这里的jsFiddle向您展示了我的问题的一个例子，我希望有人可以帮助我。

CSS

section {
    width: 758px;
    float: left;
}
.products {
    width: 100%;
    position: relative;
    float: left;
}
.product {
    width: 219px;
    margin: 0 20px 20px 0;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
}
.product a {
    display: block;
    width: 100%;
    height: 287px;
    border: 2px solid #f2dd09;
    overflow: hidden;
    position: relative;
    float: left;
}
.product a .info {
    position: absolute;
    bottom: 0;
    padding: 10px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    z-index: 6;
    width: 100%;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    -ms-transition: background 0.3s ease-in-out;
    -o-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
    font-size: 13px;
}
.product .expander {
    position: absolute;
    background: #ddd;
    top: 300px;
    left: 0;
    height: 0;
    width: 100%;
    margin-top: 10px;
    text-align: left;
    overflow: hidden;
}

HTML

<section>
    <h1 class="page-title">Expander should drop underneath the li element</h1>
    <ul class="products">
        <li class="product-category product first" data-slug="block-1" style="height: 287px;">


            <a href="#" class="">

                <div class="info">
                    <h3>Block 1</h3>
                </div>
                <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/12.jpg" alt="Block 1" width="219" height="283"/>
            </a>

            <div class="expander" style="height: 0px;"></div>
        </li>
        <li class="product-category product" data-slug="other" style="height: 287px;">


            <a href="#" class="">

                <div class="info">
                    <h3>Other</h3>
                </div>
                <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/12.jpg" alt="Other" width="219" height="283"/>
            </a>

            <div class="expander" style="height: 0px;"></div>
        </li>
        <li class="product-category product" data-slug="block-2" style="height: 287px;">


            <a href="#" class="">

                <div class="info">
                    <h3>Block 2</h3>
                </div>
                <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/12.jpg" alt="Block 2" width="219" height="283"/>
            </a>

            <div class="expander" style="height: 0px;"></div>
        </li>
        <li class="product-category product last" data-slug="block-3" style="height: 287px;">


            <a href="#" class="">

                <div class="info">
                    <h3>Block 3</h3>
                </div>
                <img src="http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/images/thumbs/12.jpg" alt="Block 3" width="219" height="283"/>
            </a>

            <div class="expander" style="height: 0px;"></div>
        </li>

    </ul>


</section>

的jQuery

$('body').on('click','.products .product-category', function(e){
    e.preventDefault();
    var slug = $(this).data('slug');
    if ($('.products .product-category[data-slug="'+slug+'"] .expander').height() > 0) {
        console.log('1.1');
        $('.products .product-category a').removeClass('active');
        $('.products .product-category[data-slug="'+slug+'"] .expander').html('').css({'height':'0px'}).parent().animate({height:287},200);
        console.log('1.2');
    } else {
        console.log('2.1');
        $('.products .product-category a').removeClass('active');
        $('.products .product-category[data-slug="'+slug+'"] a').addClass('active');
        $('.products .product-category:not([data-slug="'+slug+'"]) .expander').html('').css({'height':'0px'}).parent().animate({height:287},200, function() {
            $('.products .product-category[data-slug="'+slug+'"] .expander').html('<ul>'+slug+'</ul>').css({'height':'287px'}).parent().animate({height:600},200);
        });
        console.log('2.2');
    }
});

Answer 1

我从float: left;

中删除了.product a

.product a {
    display: block;
    width: 100%;
    height: 287px;
    border: 2px solid #f2dd09;
    overflow: hidden;
    position: relative;
}

在top: auto;

中设置.product .expander

.product .expander {
    position: absolute;
    background: #ddd;
    top: auto;
    left: 0;
    height: 0;
    width: 100%;
    margin-top: 10px;
    text-align: left;
    overflow: hidden;
}

jsFiddle Demo

jQuery扩展列表元素

1 个答案: