Question

我认为问题已经说明了。单击加号额外内容时显示（Hello Guest和Register and Signup）。他们是一个更好的工作方式，或者我有一个错误。 java脚本的新功能所以不要讨厌。 ---＆GT; http://jsfiddle.net/CM9Av/

Answer 1

您不能只是从顶部更新变量，这对页面没有任何影响。您必须手动更新顶值，就像阅读它一样。

Answer 2

你没有设置顶部。另外，缓存你的变量。

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（我不知道如何在fiddle.net中放置纯粹的js）

Answer 3

<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>

这不是最漂亮但我觉得这就是你要找的最终结果...

Onclick更改顶部位置不会做任何事情

3 个答案: