0

ドロップダウン用のjQueryプラグインが何百もあることは知っていますが、自分のニーズに合ったプラグインが見つからないようです。次のような要件：

  1. ドロップダウンはクリックすると開きます
  2. ドロップダウンが開いている場合、残りのドロップダウンはホバーすると開きます
  3. ドロップダウンは、クリックするまでのみ閉じます。

これはMacOSがメニューバーを管理する方法と非常に似ています。Windowsも同じように機能すると思います。

参考までに、 Googleのコードエディタのメニューはこのように動作します。

追加の依存関係としてjQueryUIを使用することはできません。私のアプリケーションは、そのままではすでに太っています。

4

1 に答える 1

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

完璧ではないと思いますが、正しい方向に進むはずです。

于 2012-05-30T00:46:35.073 に答える