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这样的事情取得了巨大的成功。也许Menu或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;
}

用于简单菜单扩展的Javascript

4 个答案: