0

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

4

3 回答 3

0

您不能只更新变量 fromtop，这对页面没有影响。您将不得不手动更新最高值，就像您阅读它一样。

于 2012-07-08T21:12:57.840 回答
0

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

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>

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

演示小提琴（我不知道如何将纯js放入fiddle.net）

于 2012-07-08T21:13:29.327 回答
0 
<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>

This is not the prettiest but I think this is what you are looking for as far as the end result...

于 2012-07-08T21:34:56.803 回答