我已阅读整个W3schools Javascript教程(基本和高级)超过3次。我已经阅读了无数次HTML / CSS教程。我还阅读了本网站上有关sho / hide功能的一些帖子。我曾尝试使用Javascript变量,但遇到错误。

绝对没有Jquery,请只使用Javascript。

我的标记:

<script type="text/javascript" src="/showerHider.js"></script>

<div id="wrappernav"> </div>

<div class="container">
   <a id="btntxt" href="javascript:showerHider(document.getElementById('wrappernav'))">HIDE NAVIGATION</a>
   <a id="btn" href="javascript:showerHider(document.getElementById('wrappernav'))"></a>
</div>


我是一个极简主义者,想简化我的showerHider Javascript函数和标记的属性。我有一个<div id="wrappernav">导航,当用户单击嵌套在另一个<div class="container">内的两个CLOSE按钮之一时,它会垂直过渡到屏幕之外。当wrappernav过渡时,两个按钮将移动并变为SHOW按钮,以使用户可以选择...以及,您可以看到操作的方向...

我的外部Javascript:

function showeHider(floater)
{
floater.style.webkitTransition = "margin-top .25s ease-in-out 0s" ;

if (floater.style.marginTop == "-345px" )
  {
  floater.style.marginTop = "25px" ;
  document.getElementById("btntxt") .innerHTML = "HIDE NAVIGATION" ;
  document.getElementById("btntxt") .style.top = "-370px" ;
  document.getElementById("btntxt") .style.left = "162px" ;
  document.getElementById("btn") .style.top = "-300px" ;
  document.getElementById("btn") .style.left = "135px" ;
  }

else
  {
  floater.style.marginTop = "-345px" ;
  document.getElementById("btntxt") .innerHTML = "SHOW NAVIGATION" ;
  document.getElementById("btntxt") .style.top = "20px" ;
  document.getElementById("btntxt") .style.left = "490px" ;
  document.getElementById("btn") .style.top = "17px" ;
  document.getElementById("btn") .style.left = "450px" ;
  }
}


目前,我在CLOSE / SHOW按钮的onclick属性中具有Javascript,它将这些按钮与showerHider函数联系在一起。我想简化这些属性,并将Javascript放在外部showerHider Javascript文件中。另外,我不确定是否应该让JavaScript处理过渡或使用CSS。在声明所有主要浏览器的转换时,我发现Javascript很棘手,并且宁愿让CSS来做。

最佳答案

这是一个简化的版本:

function showeHider(floater) {
  var btn, btntxt, arrValues, strPx;

  floater.style.webkitTransition = "margin-top .25s ease-in-out 0s";

  btn = document.getElementById("btn");
  btntxt = document.getElementById("btntxt");

  arrValues = (floater.style.marginTop == "-345px") ? ["25", "HIDE", "-370", "162", "-300", "135"] : ["-345", "SHOW", "20", "490", "17", "450"];
  strPx = "px";

  floater.style.marginTop = arrValues[0] + strPx;
  btntxt.innerHTML = arrValues[1] + " NAVIGATION";
  btntxt.style.top = arrValues[2] + strPx;
  btntxt.style.left = arrValues[3] + strPx;
  btn.style.top = arrValues[4] + strPx;
  btn.style.left = arrValues[5] + strPx;
}


也许strPx是一个过大的杀手,但是如果您打算最小化代码,那么var只会是1个字符长,应该会有一些收获。

我所做的是:


缓存元素btnbtntxt
将值放在数组上
使用三元运算符a ? b : c,这意味着如果a中的内容为true,它将选择b,否则为c,则可以read more about it here


但是,请强烈考虑拥有两个类,然后仅使用JavaScript在它们之间切换,例如Jeff Powers suggested

关于javascript - 如何简化我的Javascript“显示/隐藏DIV”功能的代码?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20133827/

10-12 12:19
查看更多