Javascript 如何在jquery中创建此菜单行为

这就是我想要的，看一看JSFIDLE，例如，我想要3个框，当你将鼠标悬停在它们上面时，另一个框会出现，当你离开那个框或主框时，它会消失，但当你的鼠标在它们之间时，它就消失了

单击新框后，该框将保留在那里，直到：

• 用户点击其他任何地方
• 或者单击关闭文本

已更新

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

---

在父对象上使用

mouseenter

和

mouseleave

，而不是悬停

将单击隐藏所有框应用于主体，然后在容器上放置带有

event.stopPropagation

---

更新的fiddle:

如何使用这两个选项将有助于代替悬停，并且当hideIt被触发时，单击时的停止将变得无用mouseleave@MuhammadUmermouseenter/leave仅在鼠标指针离开容器时触发，而不是离开子对象时触发。您需要手动管理您的处理程序（删除鼠标指针/单击时离开等）posted@MuhammadUmer它甚至和你贴的不一样。单击我提供的链接，而不是原始链接。它能满足你的所有要求。@MuhammadUmer我搞错了，我忘了点击更新。。。与下面相同，但具有数据属性