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：

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 =“宽度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>

改变div风格两次，打开和关闭问题。

1 个答案: