jquery - 行为类似于本机菜单栏的下拉菜单

Question

我知道有数百个用于下拉菜单的 jQuery 插件，但我似乎找不到适合我需要的那个。要求如下：

1. 单击时打开下拉菜单
2. 如果下拉菜单打开，则其余下拉菜单会在悬停时打开
3. 下拉菜单仅在您单击之前关闭。

这与 MacOS 管理其菜单栏的方式非常相似，我认为 Windows 也是如此。

Google 代码编辑器中的菜单的行为与此非常相似，以供参考。

我不能将 jQuery UI 作为附加依赖项。我的应用程序已经很胖了。

Answer 1

好吧，您可以随时根据自己的规格制作适合自己的插件，而不是使用大插件，这非常简单，只需最少的代码：

工作 jsFiddle：http: //jsfiddle.net/Mh3Pm/

HTML：

<ul id="main_nav">
    <li>
        <a href="#">Link 1</a>
        <ul class="sub_nav">
            <li><a href="#">Sublink 1</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Link 2</a>
        <ul class="sub_nav">
            <li><a href="#">Sublink 1</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Link 3</a>
        <ul class="sub_nav">
            <li><a href="#">Sublink 1</a></li>
        </ul>
    </li>
</ul>

CSS：

ul#main_nav > li {
    width: 70px;
    float: left;
}

ul.sub_nav {
    display: none;
}

#main_nav.active ul.sub_nav.active {
    display: block;
}

JS：

$('ul#main_nav').on('click', function() {
    $(this).toggleClass('active');
});

$('body').on('click', function(e) {
    if ($(e.target).closest('ul#main_nav').length == 0) {
        $('ul#main_nav').removeClass('active');
    }
});

$('ul#main_nav > li > a').on('mouseover', function() {
    $('ul.sub_nav').removeClass('active');
    $(this).siblings('ul.sub_nav').addClass('active');
});

我敢肯定它并不完美，但它应该让你走上正确的轨道。