更改div樣式兩次，打開和關閉問題。

Question

所以，我想要做的是非常基本的。我有一個div (#content)和一個菜單。每次單擊一個li菜單項時，該框應關閉並重新打開新內容。我可以打開盒子，改變內容，它只是跳過密切的風格。

我該如何運行這2個功能？或者有另一種方法可以做到這一點？

HTML：

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

使用Javascript：

功能OpenContent（）{
 變種EL =的document.getElementById（ '內容'）;
  el.style.padding =「25px 5px 5px 30px」;
  el.style.height =「450px」;
  el.style.width =「900px」;
  el.style.transition =「寬度0.2s線性，高度0.2s線性」;
}
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>