Question

我已经阅读了整个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">内的两个 CLOSE 按钮之一时，我有<div class="container">导航从屏幕垂直过渡。当wrappernav过渡时，两个按钮被移动并变为显示按钮，以便为用户提供选项... ...您可以看到它的位置......

我的外部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" ;
  }
}

目前我在关闭/显示按钮的onclick属性中有Javascript，它将按钮绑定到showerHider功能。我想简化这些属性并将Javascript放在外部showerHider Javascript文件中。另外我不确定是否应该让Javascript处理转换或使用CSS。我发现Javascript在为所有主流浏览器声明转换时很棘手，并且更愿意让CSS执行它。

Answer 1

将所有CSS移动到CSS文件并将其嵌套在show-nav类下，然后在父元素上切换它。

onclick属性也是为了在点击时运行javascript函数，你应该从用于链接到其他页面的href属性中删除你的javascript。

   <a id="btntxt" href="#" onclick="hiderShower(document.getElementById('wrappernav'));">HIDE NAVIGATION</a>

我知道你不想使用jQuery，但这有助于分离关注点。通常，您不希望在html中调用javascript。您可以将其与javascript文件中的事件侦听器绑定。

以下是另一个问题的链接，该问题显示了如果您决定使用它，如何使用vanilla javascript和jQuery切换类。

Can this jQuery be done in vanilla JS?

Answer 2

这是一个简化版本：

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个字符长度，应该有一些收益。

我做的是：

缓存元素btn和btntxt
将值放在数组
使用三元运算符a ? b : c，这意味着如果a中的内容为真，则会选择b，否则为c，您可以read more about it here。

然而，强烈考虑使用两个类，然后仅使用JavaScript在它们之间切换，如Jeff Powers suggested。

如何简化我的Javascript“在DIV上显示/隐藏”功能的代码？

2 个答案: