0

問題はすでに述べられていると思います。クリックすると、さらに追加のコンテンツが表示されます (Hello Guest と Register and Signup)。彼らはこれを行うためのより優れた機能的な方法ですか、それともバグがありますか。java-scriptで新しいので、嫌いではありません。---> http://jsfiddle.net/CM9Av/

4

3 に答える 3

0

You are not setting the top . Also, cache your variables.

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

In markup , set top in inline style. stlye.top wont read css property.

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

Try outside fiddle in a simple webpage. It works !

Demo fiddle (I dont know how to put pure js in 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>

これは最も美しいものではありませんが、最終結果としてはこれがあなたが探しているものだと思います...

于 2012-07-08T21:34:56.803 に答える
0

変数 fromtop を更新するだけでは、ページには影響しません。読み取りと同じ方法で、トップ値を手動で更新する必要があります。

于 2012-07-08T21:12:57.840 に答える