编辑:我应该指定我希望它是动画的，并且是可伸缩的。那么，为什么 + 号不随方框的其余部分一起移动呢？为什么它不是动画的？我有过渡 CSS。
我知道之前有人问过这个问题，但我试着自己写了一个，但它只是……不起作用。检查 jsfiddle 以了解我的意思。
我并不想使用太多的 Javascript。我只用它来切换菜单的状态。一切动画都需要 CSS。现在，唯一让我困惑的是为什么这不起作用？
jsfiddle:http://jsfiddle.net/bjhph51u/1/
HTML:
<div id="expandbox" expanded="false">
<input name="username" type="text" placeholder="Username" disabled></input>
<input name="password" type="password" placeholder="Password" disabled></input>
<button type="submit" disabled>go</button>
</div>
<a href="#" id="plus" onclick="expandBox()">
+
</a>
Javascript:
//expand top box
var box = document.getElementById("expandbox");
function expandBox(){
if(box.getAttribute("expanded")=="false"){
box.setAttribute("expanded","true");
box.style.height="100px";
box.style.display="block";
}else{
box.setAttribute("expanded","false");
box.style.height="0px";
box.style.display="none";
}
}
CSS:
#expandbox {
display:none;
position:fixed;
height:0px;
-webkit-transition:height 0.5s;
transition:height 0.5s;
-o-transition:height 0.5s;
-moz-transition:height 0.5s;
}
请帮助我，在此先感谢!
最佳答案
问题是，你的函数是分配给window.onload的匿名函数中的局部变量.在以下位置更改您的 fiddle 选项:Frameworks & Extensions to No wrap - in <body> .这样函数就会变成全局的，你可以调用它就好了。
关于javascript - 如何使用 CSS 和 javascript 制作可扩展框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27399209/