0

http://jsfiddle.net/xNnQ5/

我正在尝试使用 JavaScript（和 HTML）c_menu为我的网站创建一个可折叠菜单（ ）。我希望它在用户单击 div 时打开menu_open，并在用户单击时关闭menu_close。但是，当我加载页面时，所发生的只是菜单向上滚动，就好像我点击了一样menu_close，但我没有。我应该怎么办？

代码：

index.html（只有一个片段） 

<style type = "text/css">
#c_menu {
position: absolute;
width: 435px;
height: 250px;
z-index: 2;
left: 6px;
top: 294px;
background-color: #0099CC;
margin: auto;
</style>

<div id="menu_open"><img src="images/open.jpg" width="200" height="88" /></div>
<input type="button" name="menu_close" id="menu_close" value="Close"/>
<div id="c_menu"></div>

<script type = "text/javascript" src = "menu.js"> </script>

menu.js（完整代码）

document.getElementById("c_menu").style.height = "0px";
document.getElementById("menu_open").onclick = menu_view(true);
document.getElementById("menu_close").onclick = menu_view(false);

function menu_view(toggle)
{
  if(toggle == true)
  {
      document.getElementById("c_menu").style.height = "0px";
      changeheight(5, 250, 0);
  }
  if(toggle == false)
  {
      document.getElementById("c_menu").height = "250px";
      changeheight(-5, 0, 250);
  }
}

function changeheight(incr, maxheight, init)
{
  setTimeout(function () {  
  var total = init; 
  total += incr; 
  var h = total + "px";
  document.getElementById("c_menu").style.height = h;                             
  if (total != maxheight) {            
     changeheight(incr, maxheight, total);            
  }                        
}, 5)
}
4

1 回答 1

1

尝试这个：

document.getElementById("menu_open").onclick = function() {menu_view(true)};
document.getElementById("menu_close").onclick = function() {menu_view(false)};

当您使用括号 ( ...onclick = menu_view(true) ) 定义函数时，会自动调用该函数。

当你有一个没有参数的函数时，你可以像以前一样使用它，但没有括号：

document.getElementById("menu_open").onclick = menu_view;
document.getElementById("menu_close").onclick = menu_view;
于 2013-10-29T13:33:38.723 回答