1

我正在设计一个网站，并采用了一个简单的 javascript 脚本来在每个菜单标题下显示子链接。

菜单标题存储在一个列表中，每个标题都包含单独的超链接，并使用具有以下类的 CSS 文件显示：

.hidden {display: none;}
.unhidden {display: block;}

基于这个javascript函数：

function unhide(liID) {
         var item = document.getElementById(liID);
         if (item) {
            item.className=(item.className=='hidden')?'unhidden':'hidden';
         }
        }

这是 HTML 文件的示例：

<a href="javascript:unhide('menu1');">First Menu</a>
<li id="menu1" class="hidden"> 
    <ul class="subMenus">
        <li>Sub menu 1 item 1</li>
        <li>Sub menu 1 item 2</li>
        <li>Sub menu 1 item 3</li>
        <li>Sub menu 1 item 4</li>
    </ul>
</li>
<a href="javascript:unhide('menu2');">Second Menu</a>
<li id="menu2" class="hidden"> 
    <ul class="subMenus">
        <li>Sub menu 2 item 1</li>
        <li>Sub menu 2 item 2</li>
        <li>Sub menu 2 item 3</li>
        <li>Sub menu 2 item 4</li>
    </ul>
</li>

该代码有效并且执行良好。但是按照它的编码方式，一旦打开菜单，必须再次单击它才能折叠它。否则，在打开 3 或 4 个菜单后，列表会变得非常长且拥挤。

我的问题是......，在打开一个新菜单以节省空间时，javascript 中关闭以前打开的菜单所需的代码是什么？

谢谢。

4

2 回答 2

1

我相信这样的事情应该可以工作，尽管不建议将事件处理程序内联，但您实际上希望使用addEventListener()javascript 中的函数设置它们：

<a href="javascript:void()" id="menu1" onMouseOver="javascript:unhide('menu1');" onMouseOut="javascript:unhide('menu1')">First Menu</a>

这是您如何设置处理程序而不使它们内联：

function unhide(liID) {
  return function () {
    var item = document.getElementById(liID);
    if (item) {
      item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
    }
  }
}

var menu1 = document.getElementById("menu1");
menu1.addEventListener("mouseover", unhide('menu1'), true);
menu1.addEventListener("mouseout", unhide('menu2'), true);
于 2013-01-12T04:18:20.367 回答
1

为了在全局变量中保留以前的活动菜单，您可以隐藏以前选择的菜单，以下 js 可能对您有所帮助

var activemnu="";
function unhide(liID) {

  var item = document.getElementById(liID);
  if(liID!=activemnu && activemnu!="")
  {
     var activeitem= document.getElementById(activemnu);
     activeitem.className= 'hidden';
  }

  if (item) {
     item.className=(item.className=='hidden')?'unhidden':'hidden';
  }
  activemnu=liID;

}

于 2013-01-12T04:38:23.863 回答