我已阅读整个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个字符长,应该会有一些收获。我所做的是:
缓存元素
btn
和btntxt
将值放在数组上
使用三元运算符
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/