Question

我在这个页面上发现另一个问题，即两个元素具有相同的高度，即使其中一个元素没有足够的元素覆盖整个区域。它工作得很好，但达到最大宽度600px后，我想禁用此代码，如回到高度：auto;我试图解决这个问题，但没有任何结果。有什么建议吗？这是实际的javascript代码。

HTML

<div id="section3a" data-same-height="blocks-resize">
</div>

<div id="section3b" data-same-height="blocks-resize">
</div>

JAVASCRIPT

$(document).ready(function() {
var equalize = function () {
    var disableOnMaxWidth = 0; // 767 for bootstrap

    var grouped = {};
    var elements = $('*[data-same-height]');

    elements.each(function () {
        var el = $(this);
        var id = el.attr('data-same-height');

        if (!grouped[id]) {
            grouped[id] = [];
        }

        grouped[id].push(el);
    });

    $.each(grouped, function (key) {
        var elements = $('*[data-same-height="' + key + '"]');

        elements.css('height', '');

        var winWidth = $(window).width();

        if (winWidth <= disableOnMaxWidth) {
            return;
        }

        var maxHeight = 0;

        elements.each(function () {
            var eleq = $(this);
            maxHeight = Math.max(eleq.height(), maxHeight);
        });

        elements.css('height', maxHeight + "px");
    });
};

var timeout = null;

$(window).resize(function () {
    if (timeout) {
        clearTimeout(timeout);
        timeout = null;
    }

    timeout = setTimeout(equalize, 250);
});
equalize();
});

感谢大家！

相同的高度元素，但响应变化

0 个答案: