帶有 3 級深度 jquery 下拉菜單的對角線鼠標懸停

Question

首先，我將要解釋的一切都在這個小提琴中展示：

http://jsfiddle.net/rxaBH/3/

考慮一個深入 3 層的導航選項卡； 第一級選項卡，第二級：下拉列表。 第三級向側面打開的第二個下拉列表。 這是一個視覺效果：

. 它的簡化 HTML 看起來像這樣：

<ul id = "maintabs">
    <li>child 1</li>
    <li>child 2
        <ul>
            <li>grand child 1</li>
            <li>grand child 2
                <ul>
                    <li>great grand child 1</li>
                    <li>great grand child 2</li>
                    <li>great grand child 3</li>
                </ul>                
            </li>
        </ul>    
    </li>
</ul>

我不會費心將 CSS 代碼放在這里，因為它太長了，但可以在 fiddle鏈接中找到。

下面是基於鼠標懸停顯示/隱藏菜單的 jQuery 代碼：

$("ul#maintabs li").hover(function () {
    $('ul:eq(0)', this).stop(true, true).animate({
        height: 'show',
        opacity: 'show'
    }, 150);
}, function () {
    $('ul:eq(0)', this).animate({
        height: 'hide',
        opacity: 'hide'
    }, 150);
})

所有這一切都很好，但用戶交互可以改進以導航到第 3 級項目。 比方說你想導航到西瓜 > 綠色 > 真正的深綠色。 所以你將鼠標懸停在“西瓜”上，然后出現下拉菜單，然后將鼠標懸停在“綠色”上，然后出現側面下拉菜單。 然后從“綠色”水平懸停到“較暗”，然后垂直向下懸停到“真正的深綠色”。 這是視覺。 鼠標移動由紅色箭頭可視化：

但是，如果用戶想從“綠色”沿對角線直接轉到“真正的深綠色”而不先水平滾動怎么辦？ 這是所需行為的視覺效果：

這會導致鼠標離開“綠色”，結果菜單折疊並完全消失。 那么如何解決呢？

我嘗試增加 mouseleave 的超時時間，但隨后出現了另一個問題：如果您想在途中從綠色直接變為“真正的深綠色”，您會懸停在“紅色”上，也可能懸停在“紫色”上。 如果“紅色”也有孩子怎么辦？ 然后將鼠標移出“綠色”並移到“紅色”上也會顯示“紅色”的子菜單，然后您將同時打開 1 個以上的第 3 級菜單，這看起來很糟糕。

希望所有這些都有意義！

謝謝你。

Answer 1

$(document).ready(function() {
    $("ul.nav li").hover(function() { //When trigger is hovered...
        $(this).children("ul.sub").stop(true).slideDown();
    }, function() {
        $(this).children("ul.sub").stop(true).slideUp();
    });
});

這解決了我的問題

Answer 2

你考慮過用擦鞋墊代替嗎？ 使用多層導航不是一個明智的想法，它有很多可用性問題。

這就是您想要的理想行為。 Onmouseout，你要讓元素消失，否則它會一直留在那里。

查看 ibm 網站上的擦鞋墊菜單，我相信您會喜歡的。

http://www.ibm.com/us/en/