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

时间:2016-06-27 13:04:57

标签: jquery css

要切换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

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

这条线有什么问题?

感谢您的帮助。

2 个答案:

答案 0 :(得分: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);
        });
    });
});

答案 1 :(得分:0)

您必须使用.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);
    });
  });
});

这也应该解决其他问题。