用于简单菜单扩展的 Javascript

Question

您好，我是 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 分钟的时间来帮助我摆脱痛苦，

并向您致以问候，谢谢！

Answer 1

<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";
}

或者您可以使用某些具有 API 的 javascript 库轻松轻松地完成此操作。其中一些库是 Jquery（最流行的库） 、Sencha 等。

其中一些库具有具有菜单实现等的扩展。

Answer 2

我已经使用 Dojo 来完成类似的事情并取得了巨大的成功。也许是 菜单 或 MenuBar 对您有用。

Answer 3

您可以使用 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();
});

Answer 4

你不需要 java，因为只需简单的 CSS 即可：

li#submenu:hover div {
    display: block;
}