Javascript简单菜单扩展

嗨，我是JavaScript新手，我想编写一个非常简单的扩展子菜单。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分钟的时间帮我摆脱我的苦难

谢谢，谢谢！

来源

2011-08-17 Soundz

我想你应该选择你在Google搜索中看到的一个JQuery菜单示例并从那里开始。 – RSG

我想过太多，但他们都带着额外的代码，我不能devide我从东西想这就是uneeded的东西，由于我缺乏的JavaScript技能 – Soundz

<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的（最流行的一种），煎茶等

一些库有有菜单实施方案等扩展

来源

2011-08-17 23:33:24 Baz1nga

有一些调整，这真是救了我的一天：d – Soundz

我已经使用Dojo来完成这样的事情，并取得了巨大的成功。也许Menu或MenuBar将对您有用。

来源

2011-08-17 23:30:49 vaxt

你可以做这种容易使用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(); 
});

来源

2011-08-18 00:56:26 Jake

我真的很感激，时间深入挖掘javascript和jquery – Soundz

你不需要的Java这只是普通的CSS会做：

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

来源

2011-08-18 09:26:50 bavo

我也想过，但你怎么悬停显示：无;？ – Soundz

当你悬停一个元素（id =子菜单）时，你可以让它的子元素出现（id = submenu1＆submenu2）。通过：悬停后放置的子选择器（div）。 – bavo

Javascript简单菜单扩展

回答

相关问题