Question

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

点击
如果下拉列表已打开，其余下拉列表将在悬停时打开
下拉菜单仅在您点击之前关闭。

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

Google's Code Editor中的菜单与此非常相似，仅供参考。

我不能将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');
});

我确信它并不完美，但它应该让你走上正轨。

下拉菜单，其行为类似于本机菜单栏

1 个答案: