Question

我正在尝试显示和隐藏内部的一些元数据元素，并根据DIV的高度叠加DIV。 Here is an image of what it should look like，显示两个DIV及其叠加层。

左侧的元数据显示其所有元数据，右侧的元数据显示其最基本的元数据。我一直在努力实现的是，当DIV的高度缩小时，显示收缩的元数据量。我使用code on this page作为起点，但还未能解决这个问题。这是我到目前为止所提出的：

$(document).ready(function () {
    $('.overlay').each(function () {
        // 74 being the DIV height of the smaller DIV in the image
        if ($(this).closest('.brick').children('img').height() <= 74) {
            $('.categories').hide();
        }
        else {
            $('.categories').show();
        }
    });

});

这会隐藏类别元数据，但会对.categories类的所有实例执行此操作，而不仅仅是DIV中高度小于75像素的实例。

以下是我的HTML标记的片段：

<div class="brick">
    <img src="img/caine.jpg" />
    <div class="overlay">
        <div class="categories">
            <span>Typography</span>
            <span>Print</span>
        </div>
    </div> <!-- .overlay -->
    <span class="shadow">   
</div> <!-- .brick -->

Answer 1

你想：

$(document).ready(function () {
    $('.overlay').each(function () {
        // 74 being the DIV height of the smaller DIV in the image
        if ($(this).height() <= 74) {
            $('.categories', this).hide();
        }
        else {
            $('.categories', this).show();
        }
    });
});

第二个参数更改选择器的上下文，并声明您只希望'categories'类中的项目是this的子项。

根据父DIV高度显示/隐藏元素

1 个答案: