Element css Height 在 jQuery slideDown 之后返回 1

Question

在下面的JavaScript中，以下行应该找到下拉容器元素在其slideDown()/可见状态的高度。但是，当单击按钮并且下拉列表展开返回的高度为 1 时，它似乎正在做相反的事情(我已经通过取消注释函数末尾的行对此进行了测试(。当再次单击按钮以折叠下拉列表时，高度为 681。为什么会这样，当单击按钮以展开下拉容器时，是否有任何方法可以正确评估此功能中的扩展高度？

$(this).next(".dropdown-container").css("height")

以下是完整的 JavaScript：

$(document).ready(function () {
var dropdown = $(".dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function () {
$(".dropdown-btn").not(this).removeClass("active");
$(".dropdown-container").slideUp();
$(this).toggleClass("active");
if ($(this).hasClass("active")) {
$(this).next(".dropdown-container").slideDown();
if (Modernizr.mq('(max-height: 750px)') || $(this).next(".dropdown-container").css("height").replace(/px/, "") > ($(document).height() - 132 - 176)) {
$(".dropdown-btn").not(this).slideUp();
}
}
else {
$(".dropdown-btn").not(this).slideDown();
}
//$('a').text($(this).next(".dropdown-container").css("height").replace(/px/, ""));
});

Answer 1

根据上面的注释，需要在回调函数中评估高度，这是slideDown方法中的第二个选项。随着代码的移动，还需要更新this逻辑，使其相对于容器而不是按钮。以下是更新的代码：

if ($(this).hasClass("active")) {
$(this).next(".dropdown-container").slideDown("slow", function() {
// Animation complete.
if (Modernizr.mq('(max-height: 750px)') || $(this).css("height").replace(/px/, "") > ($(document).height() - 132 - 176)) {
$(".dropdown-btn").not($(this).prev(".dropdown-btn")).slideUp();
}
});
}