Question

要切换div的高度，请使用此代码，该代码非常正常：

$(document).ready(function() {
  var trg = $("#hauptTextInhaltReduziert"), // The target container
    preHeight = 420;
  trg.css("height", preHeight); // Set the initial height on page load  
  $(".aufklappen").on("click", function() {
    var curHeight = trg.height();

    if (preHeight == curHeight) {
      var xHeight = "auto";
      $(this).text("-");
    } else {
      var xHeight = preHeight;
      $(this).text("+");
    }

    var trgHeight = trg.css("height", xHeight).height();
    trg.height(curHeight).stop().animate({
      height: trgHeight
    }, 600, function() {
      trg.css("height", xHeight);
    });
  });
});

因为这只应该在网站的移动版本中起作用，其中div的初始高度设置为420px，我将第3行更改为：

preHeight = $("#hauptTextInhaltReduziert").css("height"); // The initial height

但是现在，代码不再起作用了。

这条线有什么问题？

感谢您的帮助。

Answer 1

您不能混淆css("height")和height()，因为css使用扩展名，例如px。所以对所有人使用一种方法。最好的可用性是保持数字，以便更好地使用，比如...

$(function() {
    var trg = $("#hauptTextInhaltReduziert"),
        preHeight = 420; 

    trg.height(preHeight);

    $(".aufklappen").on("click", function() {
        var curHeight = trg.height();

        if (preHeight == curHeight) {
            var xHeight = "auto";
            $(this).text("-");
        } else {
            var xHeight = preHeight;
            $(this).text("+");
        }

        var trgHeight = trg.height(xHeight).height();

        trg.height(curHeight).stop().animate({
            height: trgHeight
        }, 600, function() {
            trg.height(xHeight);
        });
    });
});

Answer 2

您必须使用.css( propertyName , value )设置值，以便可以在css中直接设置该值。在这种情况下，您将值420设置为高度。在css中，这会导致height: 420，但无效。

我的建议是您将其更改为preHeight = '420px'。为了使其余的工作正常（因为.height()返回一个数字值），你也应该改变那个部分。

以下代码应该有效：

$(document).ready(function() {
  var trg = $("#hauptTextInhaltReduziert"), // The target container
    preHeight = '420px';
  trg.css("height", preHeight); // Set the initial height on page load  
  $(".aufklappen").on("click", function() {
    var curHeight = trg.height();

    if (preHeight == (curHeight + 'px') ) {
      var xHeight = "auto";
      $(this).text("-");
    } else {
      var xHeight = preHeight;
      $(this).text("+");
    }

    var trgHeight = trg.css("height", xHeight).height();
    trgHeight = trgHeight + 'px';
    trg.height(curHeight).stop().animate({
      height: trgHeight
    }, 600, function() {
      trg.css("height", xHeight);
    });
  });
});

这也应该解决其他问题。

读取div的现有高度会阻止代码工作

2 个答案: