更改div样式两次，打开和关闭问题

Question

所以，我想做的是非常基本的。我有一个div (#content)和一个菜单。每次单击li菜单项时，该框都应关闭并重新打开新内容。我可以打开盒子，改变内容，它只是跳过关闭的样式。

我如何运行这两个函数？或者有其他方法可以做到这一点？

HTML:

<ul><li onClick="CloseContent();OpenContent();">item1</li><li onClick="CloseContent();OpenContent();">item2</li></ul><div id="content"></div>

Javascript：

函数OpenContent（）｛
 var el=document.getElementById（'content'）
 el.style.padding="25px 5px 5px 30px"
 el.style.height="450px"
 el.style.width="900px"
 el.style.transition="宽度0.2s线性，高度0.2s线性"
}
函数CloseContent（）｛
 var el=document.getElementById（'content'）
 el.style.padding="0"
 el.style.height="0px"
 el.style.width="0px"
}

Answer 1

为什么不尝试在两个函数的执行之间引入延迟？

尝试修改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>