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

【问题标题】：Onclick change top position doesnt do anythingOnclick 更改顶部位置不做任何事情
【发布时间】：2012-07-09 05:39:32
【问题描述】：

我认为问题已经说明。当您单击加号时，会显示额外的内容（Hello Guest 和 Register and Signup）。他们是这样做的更好的工作方式还是我有错误。 java脚本的新手，所以不要讨厌。 ---> http://jsfiddle.net/CM9Av/

【问题讨论】：

如果你自己添加你的代码，我们不会恨你的 :) 仅将 fiddle 用于演示目的。

标签： javascript css drop-down-menu absolute

【解决方案1】：

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

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>

在一个简单的网页中尝试外部小提琴。它有效！

Demofiddle（不知道怎么把纯js放到fiddle.net）

【讨论】：

【解决方案2】：

您不能只更新变量 fromtop，这不会对页面产生影响。您必须手动更新最高值，就像您阅读它一样。

【讨论】：

【解决方案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>

这不是最漂亮的，但我认为这就是你正在寻找的最终结果......

【讨论】：