2

我正在尝试创建一个上下滑动的动画菜单。不幸的是，它不起作用。我检查了错误控制台，没有语法错误。这是我的 Javascript：

function showLayer() {
    var hiddenLayer = document.getElementById("mainmenu");
    var layerPosition = parseInt(hiddenLayer.style.bottom);
    if (layerPosition > 700) {
        hiddenLayer.style.bottom = (layerPosition + 5) + "px";
        setTimeout("showLayer()", 20);
    }
}

function hideLayer() {
    var hiddenLayer = document.getElementByID("mainmenu");
    hiddenLayer.style.bottom = "700px";
}

这是整个上下文：

<script type="text/javascript">
function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.bottom);
if (layerPosition > 700) {
hiddenLayer.style.bottom = (layerPosition + 5) + "px";
setTimeout("showLayer()", 20);
}
}
function hideLayer() {
var hiddenLayer = document.getElementByID("mainmenu");
hiddenLayer.style.bottom = "700px";
}
</script>

<style type="text/css">
div#mainmenu { position: absolute; bottom: 700px; left: 9px; width: 600px; 
height: 350px; border-style: solid; background-color: rgb(0, 0, 0) ; border-    
width: 3px; border-top-right-radius: 7px; border-top-left-radius: 7px; }
div#mainbutton { position: absolute; top: 674px; left: 12px; width: 28px;     
height: 28px; border-style: solid; border-color: rgb(255, 255, 255); border-width: 
1px; border-radius: 4px; }
div#mainbuttontext { position: absolute; top: 679px; left: 22px; color: rgb(255, 255, 
255); font-style: normal; font-size: 18px; font-family:"Arial"; }
</style>

<div id="mainbutton"></div>
<div id="mainmenu" onClick="showLayer('mainmenu')">&nbsp;</div>
<div id="mainbuttontext">F</div>
</body>
4

1 回答 1

1

我想我找到了你的问题！这很奇怪，我无法解释，但要在 javascript 中获得样式，css 必须是内联的（设置样式不是必需的）。

所以我通过将css内联来修改你的代码。

HTML：

<div id="mainmenu" style="position:absolute;bottom:100px;" onclick="showLayer('mainmenu');">Click me!</div>

<!--I wrote 100px just for the test, you can change it and modify the js-->

JS：

function showLayer()
{
    var hiddenLayer=document.getElementById("mainmenu");
    var layerPosition=parseInt(hiddenLayer.style.bottom);
    if(layerPosition>50)
    {
        hiddenLayer.style.bottom=(layerPosition+5)+"px";
        setTimeout("showLayer()",20);
    }
}

function hideLayer()
{
    var hiddenLayer=document.getElementById("mainmenu");
    hiddenLayer.style.bottom="700px";
}

小提琴：http: //jsfiddle.net/8MWfV/

这是一个小提琴，表明非内联 css 不起作用：http: //jsfiddle.net/kfUrP/

于 2012-06-06T19:00:56.533 回答