Javascript 单击“更改顶部位置”不起任何作用_Javascript_Css_Drop Down Menu_Absolute

Javascript 单击“更改顶部位置”不起任何作用

javascript css drop-down-menu

Javascript 单击“更改顶部位置”不起任何作用,javascript,css,drop-down-menu,absolute,Javascript,Css,Drop Down Menu,Absolute,我想问题已经解决了。当你点击加号时，会显示额外的内容（Hello Guest和Register并注册）。他们是一个更好的工作方式做这件事还是我有一个错误。新的java脚本，所以不要讨厌。 --->不能只从顶部更新变量，这对页面没有影响。您必须以与读取相同的方式手动更新顶部值。您没有设置顶部。此外，缓存变量 function menuanimate() { var loginoutbox = document.getElementById("loginoutbox"); var f

我想问题已经解决了。当你点击加号时，会显示额外的内容（Hello Guest和Register并注册）。他们是一个更好的工作方式做这件事还是我有一个错误。新的java脚本，所以不要讨厌。

--->

不能只从顶部更新变量，这对页面没有影响。您必须以与读取相同的方式手动更新顶部值。

您没有设置顶部。此外，缓存变量

function menuanimate() {
    var loginoutbox = document.getElementById("loginoutbox");
    var fromtop = loginoutbox.style.top;
    if (fromtop == "-20px") {
        fromtop = "0px";
    }
    else {
        fromtop = "-20px";
    }
    loginoutbox.style.top = fromtop;
}

在标记中，以内联样式设置

top

stlye.top

无法读取css属性

<div id="loginoutbox" class="ablack" style='top:-20px'></div>

试着在一个简单的网页外摆弄。它起作用了

演示（我不知道如何在fiddle.net中使用纯js）


函数menuanimate（）{
document.getElementById（“loginoutbox”）.style.top=“0px”；
}
#形象{
位置：固定；
顶部：0px；
左：80%；
}
#图像：悬停{光标：指针；}
#后勤箱{
左：80%；
宽度：218px；
颜色：白色！重要；
位置：固定；
顶部：-20px；
背景色：#444；
高度：20px；
文本对齐：右对齐；
}
你好，客人！
|

这不是最漂亮的，但我认为这就是你想要的最终结果…

如果你愿意添加你有问题的代码，我们不会讨厌你：）使用fiddle仅用于演示目的。

<html>

<script type="text/javascript">
function menuanimate(){

document.getElementById("loginoutbox").style.top="0px";
}
</script>

<style type="text/css">
#image{
position:fixed;
top:0px;
left:80%;
}
#image:hover{cursor:pointer;}
#loginoutbox{
left: 80%;
width: 218px;
color: white !important;
position: fixed;
top: -20px;
background-color: #444;
height: 20px;
text-align: right;
}
</style>

<img style="margin-right: 94px;" src="http://www.kdogisthebest.webege.com/images/plustab.png" id="image" onClick="menuanimate();"/>

<div id="loginoutbox" class="ablack" style="top:-20px;">
<div style="display: inline-block; font-size: 14px; padding-left: 20px;">Hello Guest!</div>
<a id="register" href="#fallr-register" class="button">Register</a> |
<a id="signin" href="#fallr-signin" class="button">Login</a>
</div>

</html>