行为类似于本机菜单栏的下拉菜单 [英] Dropdown menu that behaves like the native menu bars

问题描述

我知道有数百个用于下拉列表的jQuery插件，但是我似乎找不到适合我需求的插件.要求如下:

I know there's hundreds of jQuery plug-ins for dropdowns, but I can't seem to find the one that fits my needs. Requirements as follows:

1. 点击即可打开下拉列表
2. 如果下拉列表处于打开状态，其余的下拉列表将在悬停时打开
3. 下拉列表仅在您单击之前关闭.

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

This is very similar to how MacOS manages its menu bar, I think Windows does the same.

Google的代码编辑器中的菜单的行为与此类似，仅供参考.

The menu in Google's Code Editor behaves pretty much like this, for reference.

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

I can't have jQuery UI as an additional dependency. My application is already fat as it is.

推荐答案

好吧，您不必总是使用大型插件，而是可以始终根据自己的规范来定制自己的插件，并且只需最少的代码就可以了:

Well, instead of using a big plugin, you could always make your own suited to your specs, it's pretty trivial with minimal code:

工作中的jsFiddle: http://jsfiddle.net/Mh3Pm/

Working 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');
});

我确定它并不完美，但是它应该可以使您走上正确的轨道.

I'm sure it's not perfect, but it should get you on the right track.

这篇关于行为类似于本机菜单栏的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！