DHTML初步·动态HTML 5天通 -- 追寻梦想＞编程乐园

动态HTML教程 - 第四天

Taylor 1998.3.9

第四页：完成菜单条的制作

现在给菜单条加入脚本使其能响应鼠标的行为并执行相应的
功能。我们利用visibility属性隐藏子菜单项目并在菜单
项目被点击时显示子菜单。

处理visibility时，你会立刻遇到DOM不兼容的问题。
Netscape的DOM更多地受其LAYER标签和属性的影响。所以
即使在DOM中你将一个对象的visibility属性设置为
hidden（隐藏），Netscape也会将其显示出来。如果你加入
下面这条：

if (daMenu.visibility == 'hidden')

你所得到的不是样式表语法的参数值，而是LAYERS语法的参
数值。

所以如果你设置document.foo.visibility = 'visible',
则代码将会按照你预想的那样执行，对象foo在屏幕中可以
被看到。如果你用alert(document.foo.visibility)检查参
数值, 则返回的数值是show。解决办法是设置一些变量，用
标准的条件并设定一个名为visible的变量用于Netscape
中的'show'，在Internet Explorer中则设置'visible'。
在Netscape中设置一个名为'hide' 的变量，在Internet
Explorer'则用hidden'。在相应的字符串位置放入这些
变量，则问题就解决了。

<script>

if (document.layers) {

  visible = 'show';

  hidden = 'hide';

} else if (document.all) {

  visible = 'visible';

  hidden = 'hidden';

}



function barTog(menu) {

  if (document.layers) {

    daMenu = document.layers[menu];

  } else if (document.all) {

    daMenu = document.all(menu).style;

  }

  if (daMenu.visibility == visible) {

    daMenu.visibility = hidden;

  } else {

    daMenu.visibility = visible;

  }

  lastMenu = daMenu;

}

</script>

barTog函数所做的是设置标准的条件语句，如果在被传送
的变量菜单中设定的对象是visible，则隐藏该对象，否则
就显示该对象。然后将对该对象的引用传递给名为lastMenu
的全局变量（这样以来，以后你可以再关闭它）。接下来
你要做的就是调用这个函数，所以在菜单条中你将
"Webmonkey"设定一个anchor（锚区），并设定被点击是执
行的行为。



<div id="webmonkey" class="daMenu">

  <a href="#" class="itemAnchor" 

onclick="javascript: barTog('moreMonkey'); return false;">

  Webmonkey

  </a>

</div>

这段代码执行barTog函数，并将应该被打开或关闭的DIV 的名称传递给它。显示结果如下。>>

动态HTML教程
第一页让我们编写一些有用的东西
第二页下拉菜单脚本
第三页使菜单初具规模
第四页完成菜单条的制作
第五页使菜单具备相应的功能

[第1天][第2天][第3天][第4天][第5天]

本文本站根据《网猴》相关文章改编，版权归《网猴》所有