javascript - 如何制作下拉菜单？

Question

我有一个带有工具组的菜单：

我想让一个子菜单出现在悬停的工具组 div 的右侧。我如何使用 html5、javascript（也是 jQuery）和 CSS 来实现这一点？

编辑：JsFiddle上的源代码

   <div id="menu">
        <center><h1>Toolbox</h1></center>
        <hr/>
        <div class="toolGroup">MyToolGroup&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup2&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup3&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup4&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup5&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup6&Rightarrow;</div>
        <hr/>
        <div class="toolGroup">MyToolGroup7&Rightarrow;</div>
        <hr/>
        <br/>
    </div>

#menu
{
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #c0c0c0;
    border-radius: 8px;
    padding: 10px 10px 10px 10px;
}

.toolGroup
{
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

Answer 1

这是它的简单 css 解决方案http://jsfiddle.net/Mohinder/UJErC/

HTML

<ul class="toolgroup">
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    <li><a href="">Toolgroup</a>
        <ul>
            <li><a href="">Toolgroup</a>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            <li><a href="">Toolgroup</a></li>
            </li>
        </ul>
    </li>
    </ul>

CSS

body,ul,li { margin:0px; padding:0px; }
.toolgroup,.toolgroup li ul { padding:0px; list-style:none; width:150px; background:#ccc; border:1px solid #000; }
.toolgroup li,.toolgroup li ul li { width:100%; position:relative; }
.toolgroup li a,.toolgroup li ul li a { padding:7px 10px; display:block; border-bottom:1px solid #000; }
.toolgroup li ul { display:none; position:absolute; left:150px; top:0px; }
.toolgroup li:hover ul { display:block; }

Answer 2

您可以在某些子列表上使用悬停事件：

http://jsfiddle.net/qAZFC/1/

HTML：

<div class="toolGroup">MyToolGroup4&Rightarrow;
    <ul>
        <li>Test item</li>
        <li>Test item</li>
        <li>Test item</li>
    </ul>
</div>

CSS：

.toolGroup ul {
    display:none;   
}
.toolGroup:hover ul {
    display:block;   
}

或者使用 jQuery，绑定一个 mouseenter/mouseout 事件并淡入：

http://jsfiddle.net/7TPab/1/

Answer 3

您需要使右侧的菜单已经存在并通过 HTML 和 CSS 格式化。完成后，将它们全部设置为display:none通过 CSS。

现在我们继续讨论 javascript（我将向您展示一个 jQuery 解决方案，因为它更容易并且您提出了建议）。

这样的事情应该完成你的任务：

$(function(){
    $(MyToolGroup).hover(function(){
        $(MyToolGroupSubMenu).css("display","box")
    },function(){
        $(MyToolGroupSubMenu).css("display","none")
    })
})

这是一个非常简单、精简的版本，只是为了让您朝着正确的方向前进。

重要的是每个相关工具组中的下一个子菜单，这样悬停处理程序既适用于菜单项，也适用于子菜单项。

请注意，上面代码中的选择器只是伪代码，我不能使用你的代码，因为你没有提供它，但在适用的情况下替换它们。

这是一个基本的 jsfiddle http://jsfiddle.net/rsEGZ/1/

我推荐 javascript（和 jQuery）而不是 CSS 的唯一原因是因为它允许通过动画和回调自由地将其扩展为更复杂的东西。

但是，这里是 CSS 解决方案http://jsfiddle.net/rsEGZ/2/