用于简单菜单扩展的Javascript

Javascript for simple menu expanding

本文关键字：Javascript 扩展 菜单 简单 用于      更新时间：2023-09-26

嗨，我是JavaScript新手，我想编写一个非常简单的扩展子菜单。

<div id="submenu">
  <ul>
   <li>
     Something
   </li>
   <li>
     Another
   </li>
 </ul>
 <div id="submenu-1" class="submenu-options">
  <ul>
   <li>Something-sub</li>
   <li>Something-sub</li>
   <li>Something-sub</li>
  </ul>
 </div>
 <div id="submenu-2" class="submenu-options">
  <ul>
   <li>Another-sub</li>
   <li>Another-sub</li>
   <li>Another-sub</li>
  </ul>
 </div>
</div>

更具体地说，如果我将鼠标悬停在某物上，我希望显示某物子菜单，如果鼠标离开，我希望它再次隐藏…我知道有很多人问过这个问题，有很多方法可以做到这一点，但谷歌提出了太多令人不满意的答案。我希望你能抽出10分钟来帮助我摆脱困境。

问候和感谢!

<div id="submenu">
  <ul>
   <li id="1">
     Something
   </li>
   <li id="2">
     Another
   </li>
 </ul>
 <div id="submenu-1" class="submenu-options">
  <ul>
   <li>Something-sub</li>
   <li>Something-sub</li>
   <li>Something-sub</li>
  </ul>
 </div>
 <div id="submenu-2" class="submenu-options">
  <ul>
   <li>Another-sub</li>
   <li>Another-sub</li>
   <li>Another-sub</li>
  </ul>
 </div>
</div>

如果你没有使用任何库，那么你需要这样绑定它:

 var menuText;
  window.onload = function()
  {
     menuText= document.getElementById("1");
     menuText.onfocus = menuFocusHandler;
     menuText.onblur = menuBlurHandler;
  }
function menuFocusHandler()
{
document.getElementById("submenu-1").style.display="inline";
}
function menuBlurHandler()
{
document.getElementById("submenu-1").style.display="none";
}

或者你可以使用某些javascript库来轻松地完成此操作，这些库具有轻松完成此操作的api。其中一些库是Jquery(最流行的)，Sencha等。

这些库中有一些扩展具有菜单实现等

我使用Dojo做过这样的事情，并取得了巨大的成功。

使用jQuery很容易做到这一点，以下面的下拉列表为例:

HTML: 

<ul>
   <li>Nav Item 1</li>
   <li class="dropdown">
       Nav Item 2
       <ul style="display:none">
           <li>Sub Menu Item 1</li> 
           <li>Sub Menu Item 2</li>
           <li>Sub Menu Item 3</li>
       </ul> 
   </li>
   <li>Nav Item 3</li>
</ul>
jQuery: 

$('.dropdown').hover(function() {
   $('ul', $(this)).show();
}, function() {
   $('ul', $(this)).hide();
});

你不需要java来做这个，简单的CSS就可以了:

li#submenu:hover div {
    display: block;
}
相关文章：