为什么不是'；在javascript中不能用%更改最大高度吗？

我正在尝试建立一个响应菜单，带有一个汉堡图标。我想让菜单列表滑入滑出，不需要jquery，只需要纯javascript

HTML:

<div id="animation">  
</div>
<button id="toggle">Toggle</button>

Javascript:

var but = document.getElementById('toggle');
var div = document.getElementById('animation');
var animate = function(type, callback){
var inter = -1, start = 100, end = 0;
if(type==true){
    inter = 1;
    start = 0;
    end = 100;
}
var si = setInterval(function(){
    console.log('maxheight');
    div.style.maxHeight = (start + inter) + '%';
    if(start == end){
        clearInterval(si);
    }
}, 10);
}
var hidden = false;
but.onclick = function(){
animate(hidden, function(){
    hidden = (hidden == false) ? true : false;
});
}

div.style.maxHeight = "50%";

---

问题是元素中的比例

高度

需要父元素上的固定高度，并且您没有为任何父元素提供固定的

高度

，因为对于

maxHeight

属性，

%

也定义了父元素的最大高度，单位为%

您必须将div放在具有固定高度的父容器中，这是您的工作代码：

var but=document.getElementById（'toggle'）；
var div=document.getElementById（'animation'）；
var animate=函数（类型，回调）{
var inter=-1，
开始=100，
结束=0；
如果（类型）{
inter=1；
开始=0；
结束=100；
}
var si=setInterval（函数（）{
console.log（'maxheight'）；
div.style.maxHeight=（开始+中间）+'%'；
如果（开始==结束）{
净间隔（si）；
}
}, 10);
}
var隐藏=假；
but.onclick=function（）{
设置动画（隐藏，函数（）{
隐藏=！隐藏；
});
}
div.style.maxHeight=“50%”
#动画{
宽度：300px；
高度：300px；
背景颜色：蓝色；
}
#母公司{
宽度：500px；
高度：500px；
}

切换
您的代码似乎有一些错误。我已经修复了js，并对我所更改的内容添加了注释


var but=document.getElementById（'toggle'）；
var div=document.getElementById（'animation'）；
var animate=函数（类型，回调）{
var start=100，
结束=0；
如果（类型）{
开始=0；
结束=100；
}
var si=设置间隔（函数（）{
如果（键入）{//请检查是否打开或关闭动画
启动++；
}否则{
开始--
}
div.style.maxHeight=start+'%'；
如果（开始==结束）{
净间隔（si）；
}
}, 10);
callback.call（this）；//执行回调函数
}
var隐藏=假；
but.onclick=函数（）{
设置动画（隐藏，函数（）{
hidden=！hidden；//将hidden设置为相反
});
}
/*确保父容器设置了高度，否则“最大高度”将不起作用*/
html，正文{
身高：100%；
保证金：0；
填充：0；
} 
div{
宽度：300px；
高度：300px；
背景颜色：蓝色；
}

切换
是否设置了div父容器（或
主体
和
html
）的高度？请查看，并通读，特别是您需要提供更多详细信息：发生了什么，您期望什么，等等。这是因为您没有固定高度的父容器。仅供参考，
如果（type==true）
是不必要的，它只是
如果（type）
。类似地，
隐藏=（隐藏==false）？true:false；
编写
hidden=！hidden；
十次中有九次是非常长的一段路，如果你用布尔值来获取
==
或
！=
，停止并直接使用布尔值。那些JavaScript语句不需要固定，它们完全有效，只需要显式声明。或者是否需要简短（解释器性能）它们不需要固定，但可以调整，缩短实际上不是性能问题，而是代码可读性问题，但这一缩短行的解释速度肯定会比初始行快。虽然您所写的关于使用具有固定高度的父级包装div是正确的，但div.style.maxHeight=“50%”仍然不起作用。@Grimbode不起作用，此语句在加载时执行，因为它在click事件处理程序之外，如果右键单击该div并在控制台中检查它，您将发现
最大高度：50%
。
var but = document.getElementById('toggle');
var div = document.getElementById('animation');
var animate = function(type, callback){
var inter = -1, start = 100, end = 0;
if(type==true){
    inter = 1;
    start = 0;
    end = 100;
}
var si = setInterval(function(){
    console.log('maxheight');
    div.style.maxHeight = (start + inter) + '%';
    if(start == end){
        clearInterval(si);
    }
}, 10);
}
var hidden = false;
but.onclick = function(){
animate(hidden, function(){
    hidden = (hidden == false) ? true : false;
});
}

div.style.maxHeight = "50%";