要切换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
但是现在,代码不再起作用了。
这条线有什么问题?
感谢您的帮助。
答案 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);
});
});
});
这也应该解决其他问题。