所以,我想做的是非常基础的。我有一个 div (#content)
和一个菜单。每次li
单击菜单项,该框应关闭并重新打开新内容。我可以打开盒子并更改内容,它只是跳过关闭样式。
我如何运行这两个函数?或者有其他方法可以做到这一点?
HTML:
<ul><li onClick="CloseContent();OpenContent();">item1</li><li onClick="CloseContent();OpenContent();">item2</li></ul><div id="content"></div>
Javascript:
function OpenContent(){
var el = document.getElementById('content');
el.style.padding = "25px 5px 5px 30px";
el.style.height = "450px";
el.style.width = "900px";
el.style.transition = "width 0.2s linear, height 0.2s linear";
}
function CloseContent(){
var el = document.getElementById('content');
el.style.padding = "0";
el.style.height = "0px";
el.style.width = "0px";
}
最佳答案
为什么不尝试在两个函数的执行之间引入延迟?
尝试修改CloseContent的代码如下:-
function CloseContent(){
var el = document.getElementById('content');
el.style.padding = "0";
el.style.height = "0px";
el.style.width = "0px";
setTimeout(OpenContent,500);
}
并按如下方式修改您的 HTML:-
<ul><li onclick="CloseContent()">item1</li><li onclick="CloseContent()">item2</li></ul><div id="content"></div>
关于javascript - 两次更改 div 样式,打开和关闭问题。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20163717/