javascript - 如何在 jquery 中制作此菜单行为

Question

所以这就是我想要的，例如看一下 jsfiddle，我想要 3 个框，当你将鼠标悬停在它们上面时，另一个框会出现，当你将鼠标悬停在远离那个框或主框时，它会消失，但当你的鼠标处于它们之间是空白空间。

单击新框后，该框将一直保留到:

• 用户点击其他地方。
• 或单击关闭文本

http://jsfiddle.net/T5QHn/4/ 已更新

var menu = $('.menu'), body = $('body');
menu.children('.box').hide();

body.click(hideIt);
menu.hover(showIt,hideIt);
menu.click(keepIt);



function showIt() {
    $(this).children('.box').stop().fadeIn();
}


function keepIt() {
    //something efficent and not illogical..
}


function hideIt() {
    //i have a feeling this depends on keepIt and insn't just inverse of showIt
     $(this).children('.box').stop().fadeOut();
}

Answer 1

在父级上使用 mouseenter 和 mouseleave，而不是悬停。

应用点击以隐藏主体的所有框，然后，在容器上放置一个带有 event.stopPropagation 的点击处理程序

更新 fiddle :http://jsfiddle.net/moagrius/fsPd3/1/