javascript - 两次更改 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:

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";
}

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>