Question

我正在使用jquery过滤器来缩小产品范围。

所有产品都有自己的div，但都在一个“大div”中。

使用过滤器时，不符合过滤条件的产品的div消失。但是，“大div”的高度不会改变。我们将如何自动调整“大div”的高度？

为澄清起见，在应用过滤器之前，有很多产品，因此div的高度非常大。一旦应用了过滤器，此div中的产品数量就会减少，但高度不会改变。它在底部留有一堆空白空间。

只要稍微调整浏览器窗口的大小，就会触发“大div”的高度，以适应过滤后的产品。但是，如何在无需调整浏览器大小的情况下完成此任务？

谢谢！

Answer 1

如下面的代码片段所示，#largediv会根据需要调整大小（黄色区域）。因此，您的代码中肯定还有其他东西增加了额外的高度。

$(function () {
    $("#filter1button").click(function () {
        $(".productsa, .productsb, .productsc").hide();
        $(".productsd").show();
    });
});

#largediv {
    background: yellow
}

#largediv div {
    width: 200px;
    border: 1px solid blue;
    padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="filter1button">Filter Class D</button>
<div id="largediv">
    <div class="productsa">
        <b>Product Class A</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsb">
        <b>Product Class B</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsc">
        <b>Product Class C</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsd">
        <b>Product Class D</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsa">
        <b>Product Class A</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsb">
        <b>Product Class B</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsc">
        <b>Product Class C</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
    <div class="productsd">
        <b>Product Class D</b>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in dictum elit, ut interdum mi. Duis viverra orci sit amet neque lobortis placerat.</p>
    </div>
</div>

在过滤div内容后调整div的大小

1 个答案: