用于简单菜单扩展的Javascript
用于简单菜单扩展的Javascript
提问于 2011-08-18 07:24:18
嗨，我是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分钟来帮助我走出困境
致以问候和感谢！
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-08-18 07:33:25
<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等。
其中一些库具有扩展，如菜单实现等。
Stack Overflow用户
发布于 2011-08-18 07:30:49
我曾经使用Dojo做过这样的事情，并取得了巨大的成功。也许Menu或MenuBar会对您有用。
Stack Overflow用户
发布于 2011-08-18 08:56:26
你可以使用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();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7100719
复制相关文章
相似问题
腾讯云开发者
