如何在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的单击处理程序

更新了小提琴：http://jsfiddle.net/moagrius/fsPd3/1/