Javascript 垂直菜单，在悬停时保持打开状态，然后在另一个悬停时关闭

我有一个垂直旋转菜单，在其中两个项目上打开，以显示子菜单。当您将鼠标悬停在菜单外时，它们将再次关闭并返回到正常菜单状态

我所寻找的是一种让它悬停并保持打开的方式，然后当另一个菜单悬停时，它们关闭，悬停的菜单激活

因为我正在使用Joomla！此外，显示站点等可能会很棘手，但这里是JavaScript，希望如果需要更多信息，我可以发布它。谢谢

<script type="text/javascript">
$(function(){
  $("ul li.parent").hover(function(){
     $(this).children("ul").slideDown(300);
     $(".contact-details-container p").fadeOut(200);
  },function(){
     $(this).children("ul").stop(true, true).slideUp(300); 
     $(".contact-details-container p").stop(true, true).fadeIn(2000);
  });
});
</script>

$（函数（）{
$（“ul li.parent”）.hover（函数（）{
美元。儿童（“ul”）。向下滑动（300）；
$（“.contact-details container p”）.fadeOut（200）；
}，函数（）{
$（this.children（“ul”）.stop（true，true）.slideUp（300）；
$（“.contact details container p”）.stop（true，true）.fadeIn（2000）；
});
});

HTML

导航{
位置：绝对位置；
顶部：190px；
左：0；
宽度：200px；
最小宽度：200px；
高度：900px；
背景：透明；
z指数：9999；
}
#导航背景{
位置：绝对位置；
顶部：200px；
左：0；
宽度：200px；
身高：80%；
背景：；
}
导航：以前{
内容：''；
位置：绝对位置；
顶部：-10px；
右：0；
宽度：0；
边框顶部：10px实心透明；/*右点高度*/
右边框：200px实心#570C2A；
z指数：2；
}
导航：之后{
内容：''；
位置：绝对位置；
排名：0；
左：135px；
宽度：50px；
高度：500px；
背景：透明；
-webkit变换：旋转（2deg）；
-moz变换：旋转（2deg）；
-ms变换：旋转（2deg）；
变换：旋转（2deg）；
-网络工具包盒阴影：；
-莫兹盒影：；
盒影：；
z指数：-1；
}
.主菜单，
.菜单主菜单{
最大高度：900px；
保证金：0；
填充：0；
列表样式：无；
文本对齐：居中；
字体大小：1.2米；
背景：#570C2A；
}
.菜单主李{
线高：70px；
保证金：0；
填充：0；
}
.主菜单a{
显示：块；
颜色：米色；
文字装饰：无；
}
.主菜单a:悬停，a:焦点{
颜色：深灰色；
文字装饰：无；
文本阴影：无；
大纲：0无；
-webkit转换：250ms线性0s；
-moz跃迁：250ms线性0s；
-o型过渡：250ms线性0s；
过渡：250ms线性0；
}
.主菜单a:悬停，a:焦点{
颜色：米色；
文本阴影：1px-1px 14px米色；
}
.菜单主菜单{
高度：自动；
显示：无；
}
.菜单主菜单{
字号：0.6em；
线高：30px；
}
.菜单主ul a{
背景：透明；
}
li.item-111.parent{
背景：#486060；
线高：22px；
填充：12px 3%；
}
/*--用于历史记录和恢复的子菜单样式--*/
.第125项、第126项、第127项、第128项、第129项{
背景：#486060；
}
A.项目-125{
边框顶部：2个点；
}
A.项目-129{
边框底部：2个点；
}
/*-->==结束====--*/
A.项目-112{
背景:#557171；
}
.项目-113{
背景#663366；
}
A.项目-114{
背景#86ACA8；
}
A.项目-115{
背景#CD7F72；
}
A.项目-116{
背景#BD8A16；
}
li.item-117.parent{
背景：#C59F92；
线高：50px；
填充：12px 3%；
}
/*--如何提供帮助的子菜单样式--*/
.第130项，.第131项{
背景：#C59F92；
}
A.项目-130{
边框顶部：2个点；
}
A.项目-131{
边框底部：2个点；
}
/*-->==结束====--*/
.项目-118{
背景#869175；
}
A.项目119{
背景：；
}

在悬停函数中，为什么不添加一个具有属性

display:block

的新类呢。在设置此选项之前，请调用已包含选定类的任何打开子菜单的关闭功能

它可能看起来像这样：

$(function () {
     $("ul.menu-main > li").hover(function () {
        //Don't do this again if the same menu is hovered
        if (!$(this).hasClass('selected')) {
            //Ensure any open sub-menu is closed.
            $("li.selected").children("ul").stop(true, true).slideUp(300);
            $(".contact-details-container p").stop(true, true).fadeIn(2000);
            $("li.selected").removeClass('selected');

            //Open sub-menu
            $(this).addClass('selected');
            $(this).children("ul").slideDown(300);
            $(".contact-details-container p").fadeOut(200);
        }
    });
});

---

编辑：由于（我认为）菜单的工作方式，您实际上不应该需要

display:block

属性，但您仍然需要类来识别打开的子菜单，以便应用效果。

好的，添加了HTML。。。很抱歉，这是我在潜伏数月后第一次在这里发布！哈哈。我会试试看，如果有帮助的话，我已经添加了css，但是因为我正在使用Joomla！使用javascript和菜单的html等可能会很痛苦。当我停下来时，菜单似乎仍然关闭。当另一个悬停时，它需要保持打开然后关闭，除非我没有正确地实现它，尽管我刚刚删除了您放在JDandChips中的代码。在您的开发者工具栏（F12）中，新类是否已添加到您悬停的元素中？您可能想删除slideUp，因为这将有效地调用“.hide（）”您的元素OK，所以现在当鼠标悬停在off位置时，菜单将保持打开状态。当我将鼠标悬停在另一个菜单项上时，该菜单项也保持打开状态，而上一个菜单项保持打开状态。。。我在css中添加了什么吗？另外，当另一个菜单项悬停时，需要向上滑动，因此删除该菜单项将有效地阻止此操作？很抱歉这么无助！：我已经更改了示例代码。这里应该发生的是，以前打开的任何子菜单都将使用旧的

mouseout

功能关闭。然后新的鼠标将打开并保持打开状态，直到出现新的悬停。另外，我真的不知道

$（“.contact-details container P”）

如何适合菜单的外观，所以这可能需要一些调整才能正确。

$(function () {
     $("ul.menu-main > li").hover(function () {
        //Don't do this again if the same menu is hovered
        if (!$(this).hasClass('selected')) {
            //Ensure any open sub-menu is closed.
            $("li.selected").children("ul").stop(true, true).slideUp(300);
            $(".contact-details-container p").stop(true, true).fadeIn(2000);
            $("li.selected").removeClass('selected');

            //Open sub-menu
            $(this).addClass('selected');
            $(this).children("ul").slideDown(300);
            $(".contact-details-container p").fadeOut(200);
        }
    });
});